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

Синтаксис

селектор::before {
	
}

Примеры

Пример

В данном примере по наведению на li в его конец вставится текст (а когда мышь уйдет с li - вставленный текст исчезнет). К вставленному тексту можно применять различные стили, здесь мы покрасим его в голубой цвет с помощью свойства color:

li:hover::before {
	content: '!!!';
	color: blue;
}

Результат выполнения кода:

  1. пункт
  2. пункт
  3. пункт
  4. пункт
  5. пункт
  6. пункт