Pseudoelement before

Das Pseudoelement before fügt Text vor einem Element ein. Wird nur in Verbindung mit der Eigenschaft content verwendet, die den einzufügenden Text festlegt.

Syntax

Selektor::before {
	content: 'Text';
}

Beispiel

Lassen Sie uns die li-Elemente so gestalten, dass bei Hover am Anfang der Text eingefügt wird:

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

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

Beispiel

An den eingefügten 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::before {
	color: red;
	content: '!!!';
}

Siehe auch

Pseudoelement after,
das eine Einfügung nach dem Text des Tags vornimmt
Funktion attr,
die den Wert eines Tag-Attributs abruft
Eigenschaft counter-increment,
die eine automatische Nummerierung festlegt