Pseudo-element after
Pseudo-element after lisab teksti
elemendi järele. Kasutatakse ainult koos
omadusega content,
mis määratleb lisatava teksti.
Süntaks
selektor::after {
content: 'tekst';
}
Näide
Teeme nii, et li peale kursoriga viidates
lisataks selle lõppu 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::after {
content: '!!!';
}
:
Näide
Lisatavale tekstile saab rakendada erinevaid stiile. Värvime näiteks selle teksti mõneks värvi:
<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: '!!!';
}
:
Vaata ka
-
pseudo-element
before,
mis teeb lisamise enne elemendi teksti -
funktsioon
attr,
mis saab elemendi atribuudi väärtuse -
omadus
counter-increment,
mis määrab automaatse nummerdamise
