Псевдоелемент 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,
което задава автоматично номериране
