Псевдоэлементы CSS ::before и ::after могут быть неприменимы для некоторых полей ввода и изображений, так как элементы <input> и <img> относятся к категории замещаемых элементов (replaced elements). Эта категория имеет отдельное описание в разделе рендеринга HTML-стандартов.
Замещаемые элементы
К замещаемым элементам относятся:
audiocanvasembediframeimginputobjectvideo
Объяснения от разработчиков
Fantasai, представитель рабочей группы CSS, поясняет на GitHub:
Замещаемые элементы заменяют весь контент элемента, включая содержимое псевдоэлементов
::beforeи::after. Именно поэтому такие псевдоэлементы для замещаемых элементов работать не будут.
Пример неприменимости псевдоэлементов
Например, невозможно отобразить альтернативный текст элемента <img> с помощью ::before, хотя такой подход эффективен для многих других HTML-элементов (например, <p>):
/* Этот пример не будет работать */
img::before {
content: attr(alt);
}Особенности замещаемых элементов в браузерах
Элемент <img> не всегда является замещаемым, это зависит от используемого браузера и ряда других факторов. Например, если изображение не может быть загружено, псевдоэлементы ::before и ::after будут доступны в браузерах Chrome и Firefox.
Поля ввода и частично замещаемые элементы
Ситуация с элементами формы еще сложнее. Элементы <input> и <textarea> можно назвать частично замещаемыми (semi-replaced). Этот термин предложил Таб Аткинс, редактор спецификаций CSS, в обсуждениях рабочей группы на Github:
Все типы полей ввода, как минимум, частично замещаемые. Мы до сих пор не можем быть полностью уверены в том, как такое состояние работает. Но это не замещаемые элементы в их полном представлении, так как они имеют определенные неизменяемые внутренние размеры, которым подчиняются (в отличие от обычных элементов).
Пример работающих псевдоэлементов для форм
Возможность добавления контента к элементам формы с помощью CSS-псевдоэлементов ::before и ::after зависит от типа элемента и используемого браузера. Например, Chrome и Safari поддерживают содержимое псевдоэлементов ::before и ::after для чекбоксов и радиокнопок:
/* Этот пример будет работать в Chrome и Safari */
input::before {
content: '💔';
line-height: 1;
vertical-align: top;
position: relative;
left: -1.5em;
}
input:checked::before {
content: '❤️';
}Заключение
Если у вас возникают проблемы с использованием контента псевдоэлементов ::before или ::after, не забывайте проверить, с каким элементом вы работаете. Возможно, он является замещаемым полностью или частично. Учитывая особенности замещаемых элементов и их поддержку в различных браузерах, вы сможете лучше понимать и управлять своими стилями.
Дополнительные рекомендации
Чтобы гарантировать корректное отображение псевдоэлементов, учитывайте следующие моменты:
- Проверяйте поддержку псевдоэлементов для конкретного элемента в используемом браузере.
- Используйте современные браузеры для тестирования и отладки вашего CSS-кода.
- Рассматривайте альтернативные способы стилизации замещаемых элементов, такие как использование дополнительных HTML-элементов или JavaScript.
