Uno pseudo-elemento (doppio due punti ::) stilizza una parte specifica di un elemento, oppure genera contenuto che non è nell'HTML — senza aggiungere markup extra.
Perché è importante
css
{
: ;
}
{
: ;
}
Uno pseudo-elemento (doppio due punti ::) stilizza una parte specifica di un elemento, oppure genera contenuto che non è nell'HTML — senza aggiungere markup extra.
{
: ;
}
{
: ;
}
La proprietà content è obbligatoria — senza di essa, lo pseudo-elemento non viene renderizzato. Il contenuto generato è un figlio all'inizio molto (::before) o alla fine (::after) dell'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) */
}
Quesro è l'uso classico: disegnare frecce, badge, overlay, linee decorative — mantenendo l'HTML pulito da elementi puramente visivi.
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 ha introdotto :: per distinguere gli pseudo-elementi dalle pseudo-classi (i browser accettano ancora il doppio punto su quelli vecchi per compatibilità, ma usa ::.
Il content generato viene letto da alcuni screen reader — non mettere informazioni essenziali solo in ::before/::after (usalo per la decorazione), e le icone decorative è meglio lasciarle fuori dall'albero di accessibilità.
Gli pseudo-elementi ti permettono di aggiungere icone, forme decorative (frecce, divisori), drop cap e contatori puramente in CSS — nessun <div> o <span> extra.
Mantengono il markup semantico mentre consentono dettagli visivi ricchi, e sono un elemento base dello styling pulito e manutenibile.