Псевдоэлементы в CSS

TL;DR

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

Что такое псевдоэлементы

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

Определение в одну строку: псевдоэлемент — это «виртуальный дочерний» элемент, управляемый только CSS.

Важно: большинство псевдоэлементов работают только в паре с свойством content (особенно ::before и ::after).

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

::before — вставляет содержимое перед содержимым элемента
::after — вставляет содержимое после содержимого элемента
::first-line — стилизует первую строку блока
::first-letter — стилизует первую букву блока
::selection — стили при выделении текста
::backdrop — фон полноэкранного элемента (например, )
::marker — стили маркера списков

Базовая структура использования

selector::pseudo-element {
  /* CSS-код */
}

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

Пример: наложение изображения с текстом через ::before

Задача: расположить текст поверх фонового изображения, при этом затемнить фон, не делая сам текст прозрачным.

CSS:

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

.landingPage::before{
  content: '';
  /* Фоновое изображение */
  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: 0;
}

.landingPage > *{
  /* Поднимаем содержимое выше оверлея */
  position: relative;
  z-index: 1;
}

HTML:


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

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

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

Результат (пример):

Результат: overlay с текстом на изображении

Использование ::after для пометок обязательных полей

Простой и распространённый приём — помечать обязательные поля формы красной звёздочкой при помощи ::after, не изменяя HTML разметку метки:

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

Теперь любая метка с классом required автоматически отобразит красную звёздочку после текста.

Свойство content

Свойство content управляет тем, что вставляет ::before/::after. Оно поддерживает строки, атрибуты (через attr()), URL для изображения, символы и псевдо-элементы вставки.

Примеры:

content: ‘’ — пустой элемент (часто для декоративных блоков)
content: ‘→’; — вставка текстовой стрелки
content: attr(data-note); — вставит значение атрибута data-note
content: url(иконка.svg); — вставит изображение (ограниченная поддержка)

Замечание: без content псевдоэлемент не создаёт видимого результата в большинстве браузеров.

Советы по позиционированию и слоям

Всегда задавайте position: relative для контейнера, если псевдоэлемент позиционируется абсолютом.
Управляйте z-index, чтобы псевдоэлемент оказался под или над содержимым.
Для адаптивности используйте проценты и view-height/width вместо фиксированных пикселей.

Доступность и семантика

Псевдоэлементы не добавляют семантики в DOM, поэтому важную текстовую информацию (например, содержание формы, инструкции) лучше ставить в реальное HTML-содержимое.
Пометки обязательных полей через ::after должны дублироваться в доступных атрибутах (aria-required) и/или в сопроводительных сообщениях, чтобы скринридеры заметили требование.
Не полагайтесь на цвет одного только псевдоэлемента для передачи информации — добавляйте текстовые метки или aria-атрибуты.

Важно: псевдоэлементы хороши для декоративных и вспомогательных задач, но не для критической информации.

Когда псевдоэлементы не подходят (контрпримеры)

Если содержимое должно быть доступно в DOM (для копирования, поиска, тестирования или скринридеров), псевдоэлемент не подойдёт.
Для сложной интерактивности (клик, фокус) лучше использовать реальный элемент с обработчиком событий.
Если нужно динамически менять вставленное содержимое с помощью JS (без перезаписи стилей), проще добавить элемент в HTML.

Альтернативные подходы

Добавить вспомогательный элемент в HTML (span, i) и стилизовать его через обычный селектор.
Использовать CSS-переменные для управления содержимым или цветом, если нужна тема или динамическая смена стилей.
Для интерактива использовать ::before/::after только для визуала, а обработчики привязывать к реальным элементам.

Полезные сниппеты и подсказки

Горизонтальная линия через ::after

.card::after{
  content: '';
  display: block;
  height: 1px;
  background: #eee;
  margin-top: 1rem;
}

Декоративная кавычка для цитаты

.quote{
  position: relative;
  padding-left: 2rem;
}
.quote::before{
  content: '“';
  position: absolute;
  left: 0;
  font-size: 3rem;
  line-height: 1;
  color: rgba(0,0,0,0.1);
}

Использование attr() для отображения дополнительной метки

.label::after{
  content: " (" attr(data-count) ")";
  color: #666;
  font-size: 0.9em;
}

Чеклист перед использованием ::before/::after

Нужна ли эта информация в DOM или только визуально?
Используете ли вы content и position корректно?
Проверили z-index и перекрытия на мобильных размерах?
Доступны ли альтернативы для скринридеров?
Тестировали в целевых браузерах?

Совместимость браузеров и примечания

Большинство современных браузеров поддерживает основные псевдоэлементы (::before, ::after, ::first-line, ::first-letter). Для новых псевдоэлементов (например, ::marker, ::backdrop) рекомендуется проверить поддержку на Can I Use и предусмотреть полифиллы/фоллбеки при необходимости.

Если требуются старые версии браузеров, тестируйте поведение content и background-гибридов, поскольку в редких случаях поведение может отличаться.

Мини-руководство по внедрению оверлея (шаги)

Добавьте класс контейнера и установите position: relative.
Создайте правило ::before с content: ‘’ и background-image.
Задайте position: absolute, ширину и высоту 100%.
Установите opacity или градиент для затемнения.
Поднимите текст поверх оверлея через z-index и position: relative.
Протестируйте на разных ширинах экрана и в темной/светлой теме.

Критерии приёмки

Оверлей корректно затемняет фон, не делая текст полупрозрачным.
Пометки обязательных полей видимы и доступны для скринридеров через aria.
На мобильных экранах содержимое не обрезается и остаётся читаемым.
Проходят базовые визуальные тесты в целевых браузерах.

Мини-методология тестирования (SANE)

Static: проверьте статически, что content задан.
Accessibility: проверьте aria-атрибуты и навигацию клавиатурой.
Noise: убедитесь, что декоративные элементы не мешают UX.
Edge cases: проверьте пустые строки, большие шрифты, масштаб страницы.

Ментальные модели

«Псевдоэлемент = декоративный слой» — используйте их для визуального оформления, не для семантики.
«Позиция и слой» — сначала продумайте позиционирование контейнера, потом псевдоэлемента.

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

Когда лучше добавить реальный элемент вместо псевдоэлемента?

Если содержимое должно быть доступно для скринридеров, копирования или управления через JS — добавляйте реальный элемент.

Можно ли использовать псевдоэлементы для интерактивных элементов (кнопок) и как обеспечить доступность?

Псевдоэлементы можно применять для декоративных частей кнопки, но интерактивные действия должны быть связаны с реальным элементом и его состояниями (focus, :active). Обеспечьте видимость состояния фокуса для клавиатурной навигации.

Поддерживают ли псевдоэлементы переходы и анимацию?

Да, их можно анимировать как обычные элементы (transition, animation), если псевдоэлемент видим (display/block или content не пустой).

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

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

FAQ (коротко)

Можно ли вставлять HTML через content? Нет — content вставляет только текст, символы и URL-изображения, но не разметку.
Работают ли псевдоэлементы на инлайновых элементах? Да, но некоторые возможности (например, block-свойства) могут требовать display: block/inline-block.

Псевдоэлементы в CSS — ::before и ::after