Как работают ::before и ::after?

Псевдоэлементы ::before и ::after позволяют добавлять визуальный контент без изменения HTML.

Определение

::before и ::after — это псевдоэлементы, которые создают виртуальные элементы внутри выбранного элемента.

Как они работают

При использовании псевдоэлементов:

1. Элемент должен быть отображаемым

2. Свойство content обязательно

3. Псевдоэлемент ведет себя как inline-элемент по умолчанию

Типичные сценарии использования

На практике ::before и ::after применяются для:

• Иконок

• Декоративных линий

• Оберток и маркеров

• Clearfix-решений

Пример

.button::before {
  content: "★";
  margin-right: 4px;
}

Ограничения

• Нельзя добавить интерактивное содержимое

• Нельзя получить доступ из JavaScript напрямую

• Не участвуют в DOM-дереве

Вывод

::before и ::after позволяют расширять визуальную часть интерфейса без усложнения HTML. Это мощный инструмент для декоративной верстки.