Мне сложно понять поведение :after
свойства CSS . Согласно спецификации ( здесь и здесь ):
Как показывают их имена, псевдоэлементы
:before
и:after
определяют расположение содержимого до и после содержимого дерева документа элемента.
Это, похоже, не накладывает ограничений на то, какие элементы могут иметь свойство :after
(или :before
). Однако, похоже, он работает только с определенными элементами ... <p>
работает, <img>
не <input>
работает, не <table>
работает. Я мог бы проверить больше, но суть ясна. Обратите внимание, что это выглядит одинаково во всех браузерах. Что определяет , может ли объект принять :before
и :after
недвижимость?
источник
<before></before>
".<before></before>
. Я должен был сказать «притвориться DOM» или что-то в этом роде. Смысл в том, чтобы показать, что:before
и:after
находятся внутри элемента, а не вне его.:before
и:after
не работает для замененных элементов; он просто говорит, что не «полностью определяет», как и что это будет определено в будущем (чего еще не произошло). То, что происходит в DOM, здесь не имеет значения. Хотя браузеры не поддерживают поддержку этих псевдоэлементов для некоторых элементов, это не входит в спецификации, а только то, что делают реализации.::before
и::after
не работают для пустых (пустых) элементов, которые никогда не имеют фактического содержимого, до / после которого они могут применяться. Но, что удивительно, они работают сhr
element почти во всех браузерах.:before
и:after
не требуются для работы с заменяемыми элементами, а спецификации CSS не определяют, как они будут работать с ними, а концепция заменяемого элемента несколько расплывчата.Спецификация CSS 2.1 ясно предполагает, что они могут работать для замененных элементов, просто говоря, что она не «полностью определяет», как именно. Это связано с тем, что у заменяемого элемента ожидается собственная визуальная визуализация, которая не контролируется CSS, тогда как псевдоэлементы должны что-то добавлять к содержимому элемента. В спецификации добавлено, что это будет определено «более подробно» в будущей спецификации, но пока этого не произошло.
Производители браузеров просто решили избежать проблем, не реализовав эти псевдоэлементы для некоторых элементов вообще.
Совершенно неясно, что означает «замененный элемент», и значение, похоже, несколько изменилось. Он часто интерпретируется как означающий то же, что и пустой элемент (элемент с
EMPTY
объявленным содержимым, то есть элемент, который не может иметь никакого содержимого), но сам CSS 2.1 показывает образец таблицы стилей с селекторомbr:before
(хотя браузеры проигнорировали это, реализовавbr
свои собственные путь). Можно утверждать, что все больше и больше элементов, по крайней мере частично, переходят в сферу рендеринга CSS. Например,input
элемент (включая его шрифт, цвета и т. Д.) В значительной степени контролируется с помощью CSS в современных браузерах.Современные браузеры (Firefox, IE, Chrome) , кажется, не поддерживают
:after
и:before
псевдо-элементы для других , чем пустых элементовhr
. Для полученияhr
, IE и хром разместить сгенерированный контент внутри окаймленной коробки, которая является реализациейhr
; содержимое делает коробку выше. Firefox помещает содержимое обоих (!) Псевдоэлементов после горизонтального правила, которое является его реализациейhr
. Этот вариант иллюстрирует типы проблем «взаимодействия», которые упоминаются в CSS 2.1.Часто утверждается, что эти псевдоэлементы нельзя использовать для пустых элементов, поскольку их определения HTML не допускают никакого содержимого. Это ошибка категории. Правила синтаксиса языка разметки не ограничивают то, что вы можете делать в CSS.
В заключение,
:after
и:before
в настоящее время не могут использоваться для пустых элементов (за исключением незначительногоhr
), но это в основном связано с реализациями и может измениться в будущем.источник
Элементы, у которых нет закрывающего тега, являются пустыми и не могут отображать содержимое внутри них:
https://www.w3.org/TR/html5/syntax.html#void-elements
Все моргания, Webkit и квантовые браузеры позволяют создавать псевдо-элементы только на флажках, но это спорно, так как нет спецификации не позволяет это поведению.
Вот пример: https://codepen.io/equinusocio/pen/BOBaEM/
источник