Pseudo-elemento after

Il pseudo-elemento after inserisce testo dopo un elemento. Viene utilizzato esclusivamente insieme alla proprietà content, che specifica il testo da inserire.

Sintassi

selettore::after {
	content: 'testo';
}

Esempio

Facciamo in modo che quando si passa il mouse su un li, alla sua fine venga inserito del testo:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li:hover::after {
	content: '!!!';
}

Esempio

Al testo inserito è possibile applicare vari stili. Coloriamo, ad esempio, questo testo di rosso:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li:hover::after {
	color: red;
	content: '!!!';
}

Vedi anche

il pseudo-elemento before,
che effettua l'inserimento prima del testo del tag
la funzione attr,
che ottiene il valore dell'attributo del tag
la proprietà counter-increment,
che imposta la numerazione automatica