Content-ominaisuus

Ominaisuus content mahdollistaa elementteihin mielivaltaisen generoidun tekstin lisäämisen. Sitä käytetään yhdessä pseudoelementtien after ja before kanssa.

Syntaksi

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

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

Esimerkki

Lisätään li-elementin tekstin alkuun ja loppuun lisätekstiä:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li::before {
	content: '!!!';
}
li::after {
	content: '???';
}

Esimerkki

Lisättyyn 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::before {
	color: red;
	content: '!!!';
}
li::after {
	color: green;
	content: '???';
}

Katso myös

funktion attr,
joka hakee elementin attribuutin arvon
ominaisuuden counter-increment,
joka asettaa automaattisen numerointiin