Pseudo-elementti before

Pseudo-elementti before lisää tekstin elementin eteen. Sitä käytetään vain yhdessä content-ominaisuuden kanssa, joka määrittää lisättävän tekstin.

Syntaksi

valitsija::before {
	content: 'teksti';
}

Esimerkki

Tehdään niin, että kun kursori viedään li-elementin päälle, sen alkuun lisätään teksti:

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

Esimerkki

Lisättävään tekstiin voidaan soveltaa erilaisia tyylejä. Väritetään esimerkiksi tämä teksti johonkin väriin:

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

Katso myös

pseudo-elementti after,
joka lisää tekstin tagin tekstin jälkeen
funktio attr,
joka hakee tagin attribuutin arvon
ominaisuus counter-increment,
joka määrittää automaattisen numerointiin