Pseudo-element before
Pseudo-element before lisab teksti
elemendi ette. Kasutatakse ainult koos
omadusega content,
mis määrab lisatava teksti.
Süntaks
selektor::before {
content: 'tekst';
}
Näide
Teeme nii, et li peale kursoriga viibates
lisatakse selle algusesse tekst:
<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: '!!!';
}
:
Näide
Lisatavale tekstile saab rakendada erinevaid stiile. Värvime näiteks selle teksti millekski värviks:
<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: '!!!';
}
:
Vaata ka
-
pseudo-element
after,
mis teeb sisestuse pärast elemendi teksti -
funktsioon
attr,
mis saab elemendi atribuudi väärtuse -
omadus
counter-increment,
mis määrab automaatse nummerduse
