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

Псевдоэлемент before

Псевдоэлемент before вставляет текст перед элементом. Используется только совместно со свойством content, которое задает текст, который следует вставить.

Синтаксис

селектор::before { 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::before { 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::before { color: red; content: '!!!'; }

:

Смотрите также

  • псевдоэлемент after,
    который делает вставку перед текстом тега
  • функцию attr,
    которая получает значение атрибута тега
  • свойство counter-increment,
    которое задает автоматическую нумерацию