Pseudoelement after
Pseudoelement after wstawia tekst
po elemencie. Używany jest tylko wspólnie
z właściwością content,
która określa tekst, który należy wstawić.
Składnia
selektor::after {
content: 'tekst';
}
Przykład
Sprawmy, aby po najechaniu na
li na jego końcu 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::after {
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::after {
color: red;
content: '!!!';
}
:
Zobacz też
-
pseudoelement
before,
który dokonuje wstawienia przed tekstem znacznika -
funkcję
attr,
która pobiera wartość atrybutu znacznika -
właściwość
counter-increment,
która ustawia automatyczną numerację
