CSS: после добавления содержимого к определенным элементам

У меня возникли проблемы с пониманием поведения свойства CSS :after. Согласно спецификации (здесь и здесь):

Как показывают их имена, псевдоэлементы :before и :after определяют местоположение содержимого до и после содержимого дерева элементов элемента.

Это, похоже, не устанавливает ограничений, по которым элементы могут иметь свойство :after (или :before). Однако, похоже, он работает только с конкретными элементами... <p> works, <img> does not, <input> does not, <table> does, Я могу проверить больше, но дело сделано. Обратите внимание, что это похоже на совместимость между браузерами. Что определяет, может ли объект принимать свойства :before и :after?

Ответ 1

img и input являются замененными элементами.

Заменяемый элемент - это любой элемент, внешний вид и размеры которого определяемый внешним ресурсом. Примеры включают изображения (теги <img>), плагины (теги <object>) и элементы формы (<button>, <textarea>, <input> и <select>). Все остальные типы элементов можно отнести как неприменимые элементы.

:before и :after работают только с незаменяемыми элементами.

Из спецификация:

Примечание. Эта спецификация не полностью определяет взаимодействие :before и :after с замененными элементами (такими как IMG в HTML). Эта будут более подробно определены в будущей спецификации.

С span:before, span:after DOM выглядит следующим образом:

<span><before></before>Content of span<after></after></span>

Очевидно, что это не будет работать с <img src="" />.

Ответ 2

: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 и Chrome помещают созданный контент в рамку с прямоугольником, которая является реализацией hr; содержимое увеличивает размер окна. Firefox помещает содержимое обоих (!) Псевдоэлементов после горизонтального правила, которое является его реализацией hr. Этот вариант иллюстрирует виды проблем взаимодействия, которые упоминаются в CSS 2.1.

Часто утверждается, что эти псевдоэлементы не могут использоваться для пустых элементов, поскольку их определения HTML не допускают никакого содержимого. Это ошибка категории. Правила синтаксиса языка разметки не ограничивают того, что вы можете сделать в CSS

В заключение, :after и :before в настоящее время не могут использоваться для пустых элементов (кроме незначительно для hr), но это в основном связано с реализациями и может измениться в будущем.