Az after pszeudoelem
Az after pszeudoelem szöveget szúr be
az elem után. Csak a content
tulajdonsággal együtt használható,
ami meghatározza a beszúrandó szöveget.
Szintaxis
szelektor::after {
content: 'szöveg';
}
Példa
Tegyük fel, hogy amikor az egeret a
li elemre visszük, a végére szúrunk be egy szöveget:
<ul>
<li>listaelem</li>
<li>listaelem</li>
<li>listaelem</li>
<li>listaelem</li>
<li>listaelem</li>
</ul>
li:hover::after {
content: '!!!';
}
:
Példa
A beszúrt szöveg különböző stílusokat alkalmazhat. Színezzük például pirosra ezt a szöveget:
<ul>
<li>listaelem</li>
<li>listaelem</li>
<li>listaelem</li>
<li>listaelem</li>
<li>listaelem</li>
</ul>
li:hover::after {
color: red;
content: '!!!';
}
:
Lásd még
-
a
beforepszeudoelem,
ami a címke szövege elé szúr be -
az
attrfüggvény,
ami a címke attribútumának értékét kapja meg -
a
counter-incrementtulajdonság,
ami automatikus számozást határoz meg
