CSS ::after Pseudo Elemento
Usa lo pseudo-elemento ::after in CSS per aggiungere contenuto dopo un elemento. Scopri come funziona e prova gli esempi.
Lo pseudo-elemento CSS ::after crea un elemento extra inserito come ultimo figlio dell'elemento corrispondente, subito dopo il suo contenuto reale. Non è necessario aggiungere markup all'HTML — il browser genera l'elemento dal foglio di stile. Questa pagina spiega cos'è ::after, come funziona la proprietà obbligatoria content, le insidie da evitare e i contesti in cui risulta davvero utile.
Cos'è ::after
::after permette di aggiungere contenuto generato — caratteri, stringhe di testo, un'immagine o una forma decorativa — alla fine di un elemento senza toccare l'HTML del documento. Poiché il box generato fa parte dell'elemento, è possibile animarlo, posizionarlo o usare il float come con qualsiasi contenuto normale.
Due regole sono fondamentali:
- La proprietà
contentè obbligatoria. Se si omettecontent, lo pseudo-elemento non viene mai creato. Usacontent: ""(una stringa vuota) quando si desidera solo un box decorativo senza testo. - Il box è inline per impostazione predefinita. Imposta
display: block(oinline-block) se hai bisogno che larghezza, altezza o margini verticali abbiano effetto.
::after vs :after
::after può essere scritto anche con la notazione a due punti singolo :after. La forma con doppi due punti è lo standard CSS3 moderno per gli pseudo-elementi (per distinguerli dalle pseudo-classi come :hover); la forma a singolo punto esiste solo per la compatibilità con i browser obsoleti. Si preferisce ::after a meno che non sia necessario supportare motori legacy come Internet Explorer 8.
::after vs ::before
Lo pseudo-elemento ::before inserisce il contenuto generato prima del contenuto dell'elemento, mentre ::after lo inserisce dopo. Sono altrimenti identici e vengono spesso usati insieme — ad esempio, ::before e ::after sono il modo classico per aggiungere virgolette di apertura e chiusura abbinate o parentesi decorative attorno a un titolo.
Il contenuto generato non fa parte del DOM: non può essere selezionato dall'utente e la maggior parte degli screen reader lo ignora (il supporto è inconsistente tra i browser). Usa ::after solo per contenuto puramente decorativo o supplementare — non inserire mai in content testo che l'utente deve necessariamente leggere.
Versione
Sintassi
CSS ::after Pseudo Elemento
::after {
css declarations;
}Esempio dello pseudo-elemento ::after:
Esempio CSS ::after
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::after {
content: " - William Shakespeare.";
}
</style>
</head>
<body>
<h2>::after selector example</h2>
<p>"Be or not to be"</p>
</body>
</html>Nell'esempio seguente è possibile aggiungere stili al contenuto.
Esempio dello pseudo-elemento ::after con contenuto stilizzato:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::after {
content: " - William Shakespeare.";
background-color: #eee;
color: #1c87c9;
padding: 5px 3px;
border: 2px dashed #000;
margin-left: 5px;
}
</style>
</head>
<body>
<h2>::after selector example</h2>
<p>"Be or not to be"</p>
</body>
</html>Casi d'uso comuni
::after è particolarmente utile quando si vuole aggiungere contenuto visivo senza inquinare il markup:
- Forme decorative e divisori. Un box costruito con
content: ""più unborderobackground— sottolineature, frecce, nastri, code di tooltip. - Icone dopo i link. Aggiungere una freccia per link esterni o un indicatore del tipo di file dopo un
<a>. - Il clearfix hack. Forzare un elemento padre a contenere i propri figli con float.
/* External-link arrow after every link with target="_blank" */
a[target="_blank"]::after {
content: " ↗";
}
/* Clearfix: make a container wrap its floated children */
.clearfix::after {
content: "";
display: block; /* block + clear pushes the box below the floats */
clear: both;
}Nota il content: "" vuoto nel clearfix: crea il box senza testo visibile, che è esattamente ciò che si vuole per un helper puramente di layout.
Suggerimenti e insidie
- Nessun
content, nessun elemento. Dimenticare la proprietàcontentè il motivo più comune per cui una regola::after"non fa nulla." - Imposta
displayper il dimensionamento. Uno pseudo-elemento inline ignorawidth,heighte i margini top/bottom. Usadisplay: blockoinline-block. - Attenzione alle virgolette. All'interno delle stringhe
content, esegui l'escape dei caratteri speciali con il loro codice Unicode (ad es.content: "\00BB"per») in modo che la codifica del file non li rompa.