Pseudo-élément before

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

Syntaxe

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

Exemple

Faisons en sorte qu'au survol d'un li du texte soit inséré au début :

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

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

Exemple

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

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

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

Voir aussi

le pseudo-élément after,
qui effectue une insertion après 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 une numérotation automatique