Um pseudo-elemento (dois-pontos duplo ::) estiliza uma parte específica de um elemento, ou gera conteúdo que não está no HTML — sem adicionar marcação extra.
::before e ::after — conteúdo gerado
css
{
: ;
}
{
: ;
}
Um pseudo-elemento (dois-pontos duplo ::) estiliza uma parte específica de um elemento, ou gera conteúdo que não está no HTML — sem adicionar marcação extra.
{
: ;
}
{
: ;
}
A propriedade content é obrigatória — sem ela, o pseudo-elemento não é renderizado. O conteúdo gerado é um filho no início (::before) ou no final (::after) do elemento.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
Este é o uso clássico: desenhar setas, emblemas, sobreposições, linhas decorativas — mantendo o HTML limpo de elementos puramente visuais.
p::first-line { font-weight: bold; } /* the first rendered line */
p::first-letter { font-size: 3em; } /* drop cap */
::selection { background: yellow; } /* highlighted/selected text */
input::placeholder { color: gray; } /* placeholder text */
.x:hover { } /* pseudo-CLASS (state) — one colon */
.x::before { } /* pseudo-ELEMENT (a part) — two colons */
CSS3 introduziu :: para distinguir pseudo-elementos de pseudo-classes (navegadores ainda aceitam dois-pontos único nos antigos para compatibilidade, mas use ::.).
Conteúdo gerado content é lido por alguns leitores de tela — não coloque informações essenciais apenas em ::before/::after (use para decoração), e ícones decorativos são melhor deixados fora da árvore de acessibilidade.
Pseudo-elementos permitem adicionar ícones, formas decorativas (setas, divisores), capitulares e contadores em CSS puro — sem <div>s ou <span>s extras.
Mantêm a marcação semântica enquanto permitem detalhes visuais ricos, e são um elemento fundamental de estilo limpo e sustentável.