Коротко: псевдоэлементы ::before и ::after позволяют добавлять декоративное или вспомогательное содержимое через CSS без изменения HTML. Это удобно для оверлеев, иконок, маркеров обязательных полей и других визуальных улучшений; используйте content и позиционирование, следите за доступностью и поддержкой в браузерах.

Псевдоэлементы — это селекторы в CSS, которые позволяют вставлять и стилизовать дополнительные фрагменты содержимого, не меняя HTML-структуру страницы. Они особенно полезны для декоративных элементов, визуальных оверлеев, маркеров и небольших украшений интерфейса.

Кратко: псевдоэлемент — это виртуальный дочерний элемент, управляемый CSS; для вставки текста или декоративных блоков используется свойство content, а позиционирование и отображение задаются обычными CSS-свойствами.

Часто используемые псевдоэлементы

Список часто встречающихся псевдоэлементов:

• ::before — вставляет содержимое перед содержимым элемента.
• ::after — вставляет содержимое после содержимого элемента.
• ::backdrop — фон для модальных/полноэкранных элементов (например,
  или full-screen API).
• ::first-line — стили для первой строки блока.
• ::first-letter — стили для первой буквы блока.

Важно: синтаксис двойного двоеточия (::) — современный стиль; одно двоеточие (:) также поддерживается исторически у некоторых псевдоэлементов.

Общая структура использования псевдоэлемента

Простейший шаблон:

selector::pseudo-element {
  /* css-правила */
}

Рекомендуется привязывать правила к классам или id, а не к тегам, чтобы не затронуть случайные элементы в макете.

Пример: оверлей изображения с помощью ::before

Задача: поместить изображение на задний план блока с текстом и сделать поверх читаемый полупрозрачный оверлей.

HTML:

  
Using the Before pseudo-element
  

    This is the result of using the before pseudo-element
    to overlay an image with readable text.
  

CSS:

.landingPage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100vh; /* растягиваем на высоту экрана */
  position: relative; /* контейнер должен быть позиционирован для абсолютного псевдоэлемента */
  color: #fff;
  padding: 1rem;
  box-sizing: border-box;
}

.landingPage::before {
  content: ""; /* обязательно у ::before/::after */
  background: url(https://source.unsplash.com/_1EYIHRG014/1600x900) no-repeat center/cover;
  opacity: 0.4; /* делает изображение менее контрастным */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* помещаем фоновый слой позади текста */
}

Объяснение:

• content: “” — псевдоэлемент не появится без этого свойства.
• position: absolute в сочетании с position: relative у родителя позволяет растянуть псевдоэлемент по контейнеру.
• opacity применяется только к псевдоэлементу, поэтому текст остаётся контрастным при правильном z-index.

Результат — читаемый текст поверх затемнённого или размы́того изображения.

Пример: пометка обязательных полей с помощью ::after

Если нужно добавить визуальный маркер (например, красную звёздочку) после подписи поля формы, можно использовать ::after:

.required::after {
  content: '*';
  color: red;
  margin-left: 0.25rem;
}

Это позволяет разделить структуру (HTML) и оформление (CSS) — лучшие практики в разработке фронтенда.

Свойство content

Свойство content используется только с ::before и ::after. Оно может содержать:

• строковый литерал: content: “Пример“;
• пустую строку для пустого контейнера: content: “”;
• значения атрибутов: content: attr(data-label);
• встроенные изображения через url() (с ограничениями поддержки): content: url(…);

Без content псевдоэлемент не рендерится, даже если заданы другие свойства.

Частые ошибки и когда это не работает

• Забыт content: “” — псевдоэлемент не появится.
• Родитель не имеет position: relative; — абсолютный псевдоэлемент не ограничится контейнером.
• Оверлей перекрывает интерактивные элементы (кнопки/ссылки) — не забудьте pointer-events: none для декоративных слоёв.
• Использование opacity на родительском элементе сделает прозрачными и дочерние элементы; ставьте прозрачность на псевдоэлемент.
• Псевдоэлементы не работают для self-closing элементов вроде (нельзя вставить ::before у img в ряде случаев); применяйте их к контейнеру.

Важно: всегда проверяйте доступность — если псевдоэлемент несёт значимую информацию, её нужно также отразить в HTML или ARIA-атрибутах.

Альтернативы и когда их использовать

• Вставлять декоративные элементы в HTML, если они семантически важны или влияют на доступность.
• Использовать фон через background-image на контейнере, когда не требуется отдельный элемент DOM.
• SVG-спрайты/иконки для сложной графики и масштабируемости.
• JS для динамического добавления контента, если нужно менять содержимое в ответ на пользовательские действия.

Выбор подхода: если элемент чисто декоративный — псевдоэлемент; если элемент важен для понимания или взаимодействия — HTML.

Ментальные модели и эвристики

• Псевдоэлемент как «виртуальный ребёнок» — он наследует контекст, но не добавляет узлы в DOM.
• content — ключевой переключатель: нет content — нет элемента.
• ::before/::after для оформления; HTML для семантики и доступности.
• Всегда думайте о наложении и pointer-events, чтобы не блокировать интерактивность.

Чеклист по ролям

• Дизайнер:
  • Уточнить, декоративен ли элемент или несёт смысл.
  • Предоставить макет оверлея/иконки в нескольких размерах.
• Фронтенд-разработчик:
  • Добавить position: relative на контейнер.
  • Убедиться, что content задан.
  • Использовать z-index и pointer-events по необходимости.
  • Проверить адаптивность и контрастность текста.
• QA/Тестировщик:
  • Проверить в разных браузерах и на мобильных.
  • Проверить таб-навигацию и скринридеры (если элемент значим).

Быстрая шпаргалка (cheat sheet)

• Обязательное: content: “” или content: ‘текст’;
• Для фонового оверлея: position: absolute; top:0;left:0;width:100%;height:100%;z-index:-1;
• Для иконки после текста: .label::after { content: url(…); display: inline-block; width:1em; height:1em; }
• Для игнорирования клика: pointer-events: none;
• Для текстовых вставок из атрибута: content: attr(data-text);

Совместимость и рекомендации

Псевдоэлементы ::before и ::after хорошо поддерживаются большинством современных браузеров. Учитывайте старые версии IE и редкие отличия в поддержке для специфичных значений свойства content (например, content: url()). При необходимости сверяйтесь с актуальной базой поддержки (Can I Use).

Примеры отказа и обходные пути

• Если требуется интерактивность (например, ссылка внутри псевдоэлемента) — нельзя: псевдоэлементы не поддерживают вложенные интерактивные элементы. Решение: вставить реальный элемент в HTML.
• Если нужен полный контроль над изображениями (лазерная обработка, lazy-loading, srcset) — используйте реальный .

Небольшая методология внедрения

1. Определите, декоративен ли элемент.
2. Если да — спроектируйте его как псевдоэлемент, учтя доступность.
3. Протестируйте на нескольких разрешениях и браузерах.
4. Добавьте fallbacks для старых браузеров, если нужно.

Краткий глоссарий (1 строка каждый)

• Псевдоэлемент — виртуальный элемент, создаваемый CSS и не добавляемый в DOM.
• content — свойство, которое создаёт содержимое для ::before/::after.
• z-index — порядок наложения слоёв.
• pointer-events — управление реакцией на указатель (мышь/тач).

Часто задаваемые вопросы

Можно ли вставить изображение через content?

Да, через content: url(…), но поддержка и поведение могут отличаться между браузерами; для полноценных изображений лучше использовать background-image или .

Как избежать того, что фонный псевдоэлемент блокирует клики?

Добавьте pointer-events: none; или скорректируйте z-index, чтобы псевдоэлемент был позади интерактивных элементов.

Короткое резюме:

Псевдоэлементы ::before и ::after — мощный инструмент для отделения визуального оформления от структуры HTML. Используйте content и позиционирование, проверяйте доступность и тестируйте в целевых браузерах. Для семантично важного или интерактивного содержимого вставляйте настоящие элементы в HTML.