Pseudoelement after

Das Pseudoelement after fügt Text nach dem Element ein. Wird nur gemeinsam mit der Eigenschaft content verwendet, die den einzufügenden Text festlegt.

Syntax

Selector::after {
	content: 'Text';
}

Beispiel

Lassen Sie uns die li so gestalten, dass bei Mouseover am Ende der Text eingefügt wird:

<ul>
	<li>Listenelement</li>
	<li>Listenelement</li>
	<li>Listenelement</li>
	<li>Listenelement</li>
	<li>Listenelement</li>
</ul>

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

Beispiel

An den einzufügenden Text können verschiedene Stile angewendet werden. Färben wir diesen Text zum Beispiel in einer beliebigen Farbe ein:

<ul>
	<li>Listenelement</li>
	<li>Listenelement</li>
	<li>Listenelement</li>
	<li>Listenelement</li>
	<li>Listenelement</li>
</ul>

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

Siehe auch

Pseudoelement before,
das eine Einfügung vor dem Text des Tags vornimmt
Funktion attr,
die den Wert des Tag-Attributs erhält
Eigenschaft counter-increment,
die die automatische Nummerierung festlegt