Pseudoelement after
Pseudoelementet after indsætter tekst
efter et element. Bruges kun sammen
med egenskaben content,
som angiver den tekst, der skal indsættes.
Syntaks
selektor::after {
content: 'tekst';
}
Eksempel
Lad os gøre det sådan, at når man holder musen over
li, indsættes teksten i dens ende:
<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: '!!!';
}
:
Eksempel
Der kan anvendes forskellige stile til den indsatte tekst. Lad os for eksempel farve denne tekst i en eller anden farve:
<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: '!!!';
}
:
Se også
-
pseudoelement
before,
som foretager indsættelse før tekstens tag -
funktionen
attr,
som henter værdien af tag-attributten -
egenskaben
counter-increment,
som angiver automatisk nummerering
