Pseudoelementet before

Pseudoelementet before indsætter tekst før et element. Bruges kun sammen med egenskaben content, som angiver den tekst, der skal indsættes.

Syntaks

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

Lad os gøre det sådan, at når man holder over li, indsættes teksten i begyndelsen:

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

Der kan anvendes forskellige stilarter til den indsatte tekst. Lad os for eksempel farve denne tekst i en eller anden farve:

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