:: primeira letra - CSS-Tricks

::first-letteré um pseudoelemento que permite estilizar a primeira letra de um elemento, sem a necessidade de colar uma tag ao redor da primeira letra em seu HTML. Embora nenhuma tag seja adicionada ao DOM, é como se a primeira letra de destino estivesse contida em uma tag. Você pode estilizar a primeira letra como se fosse um elemento real com:

p::first-letter ( font-weight: bold; color: red; )


The first letter is bold and red

O resultado é como se você tivesse um elemento falso em torno da primeira letra:


The first letter is bold and red.

A primeira letra está em negrito e vermelha

O pseudoelemento só funciona se o elemento pai for uma caixa de contêiner de bloco (em outras palavras, não funciona na primeira letra dos display: inline;elementos).
Se você tiver um ::first-lettere ::first-lineem um elemento, a primeira letra será herdada dos estilos da primeira linha, mas os estilos no ::first-letterserão substituídos quando houver conflito de estilos.
Se você gerar conteúdo com ::before, a primeira letra ou caractere de pontuação, seja parte do nó do texto original ou criado com o conteúdo gerado, será o alvo.

Mais Informações

Ao usar para p:first-of-typeletras maiúsculas, use em conjunto com para que nem todas as primeiras letras sejam estilizadas
Exemplo de caneta - com conteúdo gerado
W3C Wiki
Módulo W3C CSS3 Selectors

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.