Зачем нужен before?

`::before` — это CSS-псевдоэлемент, который вставляет сгенерированный контент перед содержимым элемента. Используется для декора, иконок, меток без изменения HTML.

Что делает

Создаёт виртуальный элемент в начале содержимого целевого элемента; требует свойство content:

.element::before {
  content: '';        /* обязательно */
  /* стили */
}

Применения

Иконки перед текстом

.link::before {
  content: '🔗';
  margin-right: 4px;
}

Метки и префиксы

.price::before {
  content: '₽ ';
}
blockquote::before {
  content: '«';
}

Декоративные элементы

.divider::before {
  content: '';
  display: block;
  height: 1px;
  background: gray;
}

Счётчики

li::before {
  content: counter(item) '. ';
  counter-increment: item;
}

Детали

• Требует `content` — без него не отображается.
• Inline по умолчанию.
• Сгенерированный контент не в DOM — не для важного/копируемого текста.
• ::before идёт перед содержимым, ::after — после.

Коротко для собеседования

::before — псевдоэлемент, вставляющий сгенерированный контент перед содержимым элемента (требует content). Для иконок перед текстом, меток, префиксов (кавычки, валюта), декора, счётчиков — без лишних тегов. Контент не в DOM. Парный ::after вставляет после содержимого.