Pseudoelement before
Pseudoelement before wstawia tekst
przed elementem. Używany jest wyłącznie razem
z właściwością content,
która określa tekst do wstawienia.
Składnia
selektor::before {
content: 'tekst';
}
Przykład
Sprawmy, aby po najechaniu na
li na początku został wstawiony tekst:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:hover::before {
content: '!!!';
}
:
Przykład
Do wstawianego tekstu można stosować różne style. Pokolorujmy na przykład ten tekst na jakikolwiek kolor:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:hover::before {
color: red;
content: '!!!';
}
:
Zobacz też
-
pseudoelement
after,
który wykonuje wstawienie po tekście znacznika -
funkcję
attr,
która pobiera wartość atrybutu znacznika -
właściwość
counter-increment,
która ustawia automatyczną numerację
