CSS ::before — как работает
CSS ::before: принцип работы, корректный синтаксис, практический сценарий, ограничения, ошибки и актуальная совместимость.
Назначение и границы
Практический смысл «::before» связан с тем, чтобы выбрать создаваемую браузером часть элемента или особый фрагмент его содержимого. Псевдоэлемент ::before выбирает специальную часть элемента без отдельного HTML-узла. Контрольная проверка «::before» проходит в компоненте внутри узкого контейнера, а не viewport, а наблюдаемой точкой служит перестроение при смене writing-mode.
Проверяя «::before», соблюдайте правило: проверяйте, создаётся ли псевдоэлемент в выбранном контексте и доступно ли содержимое без него. Для «::before» изменяйте одно условие за запуск и фиксируйте фактический результат.
Синтаксис ::before
Для демонстрации «::before» используется короткий код с наблюдаемым результатом. Сохраните структуру примера, когда будете проверять другое значение.
.label::before {
color: #2563eb;
}Как работает ::before
Применяет декларации к псевдоэлементу без добавления лишнего HTML-узла. Для «::before» проверьте две контрольные точки — перестроение при смене writing-mode и поведение без пользовательской таблицы стилей: так видно, на каком этапе появляется итоговое поведение этой темы.
Проверка в проекте
- Проверяйте, создаётся ли псевдоэлемент в выбранном контексте и доступно ли содержимое без него; результат относится непосредственно к «::before».
- Проверить Chrome, Firefox и Safari для новой или экспериментальной возможности при разборе «::before».
- Проверьте «::before» в компоненте внутри узкого контейнера, а не viewport через перестроение при смене writing-mode и запишите наблюдаемое изменение.
Критерий выбора «::before» — предсказуемая работа в заявленном контексте. Для «::before» подтвердите её через перестроение при смене writing-mode и соблюдите ограничение: не подменяйте ошибку декоративным overflow hidden.
Практика с ::before
Перенесите «::before» в минимальном компоненте и испытайте его в компоненте внутри узкого контейнера, а не viewport. Сначала воспроизведите правильный результат, затем намеренно добавьте риск для «::before»: смысловое содержимое нельзя оставлять доступным только через ::before.
Сценарий: в компоненте внутри узкого контейнера, а не viewport.
Ошибки при работе с ::before
Каскад
Смысловое содержимое нельзя оставлять доступным только через ::before — это предметный риск для «::before».
Поддержка
Загрузка тяжёлого ресурса до того, как он нужен пользователю при использовании «::before».
Контекст
Дублирование интерактивной роли без нативного управления; для «::before» проверьте это отдельно.
Поддержка ::before
Для «::before» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «::before»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о ::before
Как понять, что «::before» выбрано правильно?
«::before» выбрано правильно, когда оно решает задачу «выбрать создаваемую браузером часть элемента или особый фрагмент его содержимого», сохраняет результат в компоненте внутри узкого контейнера, а не viewport и проходит предметную проверку: проверяйте, создаётся ли псевдоэлемент в выбранном контексте и доступно ли содержимое без него.
Нужен ли запасной вариант для «::before»?
Запасной вариант для «::before» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «::before» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.