Propriété content

La propriété content permet d'insérer dans les balises du texte généré arbitraire. Elle est utilisée conjointement avec les pseudo-éléments after et before.

Syntaxe

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

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

Exemple

Insérons du texte supplémentaire au début et à la fin du texte de la balise li :

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

li::before {
	content: '!!!';
}
li::after {
	content: '???';
}

Exemple

Divers styles peuvent être appliqués au texte inséré. Colorons, par exemple, ce texte avec une certaine couleur :

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

li::before {
	color: red;
	content: '!!!';
}
li::after {
	color: green;
	content: '???';
}

Voir aussi

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