Pseudo-element after

Het pseudo-element after voegt tekst in na het element. Wordt alleen gebruikt in combinatie met de eigenschap content, die de in te voegen tekst specificeert.

Syntaxis

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

Voorbeeld

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

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

Voorbeeld

Er kunnen verschillende stijlen worden toegepast op de ingevoegde tekst. 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::after {
	color: red;
	content: '!!!';
}

Zie ook

pseudo-element before,
dat tekst invoegt vóór de tekst van de tag
de functie attr,
die de waarde van een tag-attribuut ophaalt
de eigenschap counter-increment,
die automatische nummering instelt