Pseudo-element before

Het pseudo-element before voegt tekst in voor een element. Wordt alleen gebruikt in combinatie met de eigenschap content, die de in te voegen tekst specificeert.

Syntaxis

selector::before {
	content: 'tekst';
}

Voorbeeld

Laten we ervoor zorgen dat bij het hoveren over een li de tekst wordt ingevoegd aan het begin:

<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: '!!!';
}

Voorbeeld

Op de in te voegen tekst kunnen verschillende stijlen worden toegepast. Laten we deze tekst bijvoorbeeld in een kleur inkleuren:

<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: '!!!';
}

Zie ook

pseudo-element after,
dat tekst invoegt na de tekst van de tag
de functie attr,
die de waarde van een tag-attribuut ophaalt
de eigenschap counter-increment,
die automatische nummering instelt