Pseudo-élément after

Le pseudo-élément after insère du texte après un élément. Il est utilisé uniquement conjointement avec la propriété content, qui définit le texte à insérer.

Syntaxe

sélecteur::after {
	content: 'texte';
}

Exemple

Faisons en sorte que lors du survol d'un li, le texte soit inséré à sa fin :

<ul>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
</ul>

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

Exemple

Divers styles peuvent être appliqués au texte inséré. Colorons, par exemple, ce texte en rouge :

<ul>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
	<li>élément de liste</li>
</ul>

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

Voir aussi

le pseudo-élément before,
qui effectue une insertion avant le texte de la balise
la fonction attr,
qui récupère la valeur d'un attribut de la balise
la propriété counter-increment,
qui définit la numérotation automatique