Для чего нужны псевдоэлементы

Псевдоэлементы (::before, ::after, ::first-letter, ::first-line и др.) позволяют стилизовать определённые части элемента без добавления лишнего HTML-кода. Они создают виртуальные элементы, которые можно использовать для декоративных целей, добавления контента или особого оформления.

Пример:

.button::after {
  content: "→";
  margin-left: 5px;
}

p::first-letter {
  font-size: 2em;
  color: red;
}

Основные случаи использования:

• Добавление иконок/декоративных элементов
• Создание сложных форм (например, треугольников)
• Стилизация первой буквы/строки текста
• Генерация контента через content (но не для критически важной информации)