Pseudo-elementti after

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

Syntaksi

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

Esimerkki

Tehdään niin, että kun kursori viedään li-elementin päälle, sen loppuun 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::after {
	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::after {
	color: red;
	content: '!!!';
}

Katso myös

pseudo-elementti before,
joka lisää tekstin elementin eteen
funktio attr,
joka hakee elementin attribuutin arvon
ominaisuus counter-increment,
joka määrittää automaattisen numerointiin