Pseudo-elementos

Um pseudo-elemento CSS é uma palavra-chave adicionada a um seletor que permite que você estilize uma parte específica do elemento selecionado. Por exemplo, o pseudo-elemento ::first-line aplica o estilo apenas na primeira linha de um parágrafo.

/* A primeira linha de todo elemento <p>. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Observação: Diferentemente dos pseudo-elementos, pseudo-classes podem ser utilizadas para estilizar um elemento baseado em seu estado.

Sintaxe

seletor::pseudo-elemento {
  propriedade: valor;
}

Você pode utilizar apenas um pseudo-elemento em um seletor. Ele deve aparecer depois da declaração de um elemento simples.

Observação: Como regra, os dois pontos devem ser usados duas vezes (::) ao invés de uma única vez (:). Isso distingue pseudo-classes de pseudo-elementos. Apesar disso, devido a essa distinção não estar presente em versões mais antigas da especificação da W3C, a maioria dos navegadores suportam ambas as sintaxes para os pseudo-elementos originais.

Índice de pseudo-elementos comuns

Navegador	Versão mais baixa	Suporte de
Internet Explorer	8.0	`:pseudo-element`
Internet Explorer	9.0	`:pseudo-element ::pseudo-element`
Firefox (Gecko)	1.0 (1.0)	`:pseudo-element`
Firefox (Gecko)	1.0 (1.5)	`:pseudo-element ::pseudo-element`
Opera	4.0	`:pseudo-element`
Opera	7.0	`:pseudo-element ::pseudo-element`
Safari (WebKit)	1.0 (85)	`:pseudo-element ::pseudo-element`

Ver também

pseudo-classes