Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
Pseudo-elementos
Umpseudo-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;}Nota:Diferentemente dos pseudo-elementos,pseudo-classes podem ser utilizadas para estilizar um elemento baseado em seuestado.
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.
Nota: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
::after::before::cue::first-letter::first-line::selection::slotted::backdropExperimental::placeholderExperimental::markerExperimental::spelling-errorExperimental::grammar-errorExperimental
| Navegador | Versão mais baixa | Suporte de |
|---|---|---|
| Internet Explorer | 8.0 | :pseudo-element |
| 9.0 | :pseudo-element ::pseudo-element | |
| Firefox (Gecko) | 1.0 (1.0) | :pseudo-element |
| 1.0 (1.5) | :pseudo-element ::pseudo-element | |
| Opera | 4.0 | :pseudo-element |
| 7.0 | :pseudo-element ::pseudo-element | |
| Safari (WebKit) | 1.0 (85) | :pseudo-element ::pseudo-element |