5 августа буду в отъезде. отвечаю по возможности

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