тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

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