Псеўдаэлемент after
Псеўдаэлемент after устаўляе тэкст
пасля элемента. Выкарыстоўваецца толькі сумесна
са ўласцівасцю content,
якая задае тэкст, які трэба ўставіць.
Сінтаксіс
селектар::after {
content: 'тэкст';
}
Прыклад
Давайце зробім так, каб пры навядзенні на
li у яго канец устаўляўся тэкст:
<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: '!!!';
}
:
Прыклад
Да ўстаўляемага тэксту можна ўжываць розныя стылі. Афарбуем, напрыклад, гэты тэкст у які-небудзь колер:
<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: '!!!';
}
:
Глядзіце таксама
-
псеўдаэлемент
before,
які робіць устаўку перад тэкстам тэга -
функцыю
attr,
якая атрымлівае значэнне атрыбута тэга -
уласцівасць
counter-increment,
якая задае аўтаматычную нумарацыю
