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