Pseudo-element before

Die pseudo-element before voeg teks in voor 'n element. Dit word slegs saam gebruik met die eienskap content, wat die teks spesifiseer wat ingevoeg moet word.

Sintaksis

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

Voorbeeld

Kom ons maak dit so dat wanneer ons oor 'n li beweeg, teks aan die begin ingevoeg word:

<ul>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ul>

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

Voorbeeld

Verschillende style kan op die ingevoegde teks toegepas word. Laat ons byvoorbeeld hierdie teks in 'n kleur inkleur:

<ul>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
	<li>lys item</li>
</ul>

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

Sien ook

pseudo-element after,
wat 'n invoeging na die teks van die element doen
die funksie attr,
wat die waarde van 'n element se attribuut kry
die eienskap counter-increment,
wat outomatiese nommering spesifiseer