Pseudoelement after
Pseudoelement after vkladá text
za element. Používa sa iba spolu
s vlastnosťou content,
ktorá určuje text, ktorý sa má vložiť.
Syntax
selektor::after {
content: 'text';
}
Príklad
Poďme spraviť tak, aby pri nájdení myšou na
li sa na jeho koniec vložil text:
<ul>
<li>položka zoznamu</li>
<li>položka zoznamu</li>
<li>položka zoznamu</li>
<li>položka zoznamu</li>
<li>položka zoznamu</li>
</ul>
li:hover::after {
content: '!!!';
}
:
Príklad
K vkladanému textu možno aplikovať rôzne štýly. Zafarbime, napríklad, tento text na nejakú farbu:
<ul>
<li>položka zoznamu</li>
<li>položka zoznamu</li>
<li>položka zoznamu</li>
<li>položka zoznamu</li>
<li>položka zoznamu</li>
</ul>
li:hover::after {
color: red;
content: '!!!';
}
:
Pozrite tiež
-
pseudoelement
before,
ktorý robí vložku pred text tagu -
funkciu
attr,
ktorá získava hodnotu atribútu tagu -
vlastnosť
counter-increment,
ktorá zadáva automatické číslovanie
