Зачем нужен before

Псевдоэлемент ::before используется для вставки контента перед содержимым элемента. Это часть CSS, позволяющая добавлять декоративные элементы без изменения HTML.

Основные применения:

1. Добавление иконок или декоративных элементов
2. Создание визуальных эффектов (например, подчёркиваний)
3. Генерация контента через свойство content

Пример:

.button::before {
  content: "→ ";
  margin-right: 5px;
}

Особенности:

• Требует свойства content, даже если оно пустое (content: "")
• Работает только с блочными и инлайн-блочными элементами
• Не влияет на DOM, контент существует только визуально

Часто используется вместе с ::after для сложных декоративных эффектов.