Pseudo-elementet after
Pseudo-elementet after infogar text
efter ett element. Används endast tillsammans
med egenskapen content,
som anger texten som ska infogas.
Syntax
selektor::after {
content: 'text';
}
Exempel
Låt oss göra så att när man hovrar över
li infogas text i slutet av den:
<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: '!!!';
}
:
Exempel
Man kan applicera olika stilar på den infogade texten. Låt oss till exempel färga denna text i någon färg:
<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 även
-
pseudo-elementet
before,
som gör infogning före texten i taggen -
funktionen
attr,
som hämtar värdet på en taggs attribut -
egenskapen
counter-increment,
som anger automatisk numrering
