Pseudo-element before
Pseudo-element before vkladá text
pred element. Používa sa iba spolu
s vlastnosťou content,
ktorá určuje text, ktorý sa má vložiť.
Syntax
selektor::before {
content: 'text';
}
Príklad
Urobme tak, aby sa pri nájdení myšou na
li na jeho začiatok 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::before {
content: '!!!';
}
:
Príklad
K vloženému textu je možné 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::before {
color: red;
content: '!!!';
}
:
Pozri tiež
-
pseudo-element
after,
ktorý vykoná vloženie za text tagu -
funkciu
attr,
ktorá získa hodnotu atribútu tagu -
vlastnosť
counter-increment,
ktorá nastavuje automatické číslovanie
