К каким самозакрывающимся элементам могут быть:: before и:: после применения псевдоэлементов

Мне особенно интересно понять, когда псевдо-элементы ::before и ::after могут применяться к самозакрывающимся тегам. Это определение этих псевдоэлементов в соответствии с спецификациями CSS W3 сгенерированного содержимого:

12.1: before и: after псевдоэлементы. Авторы определяют стиль и расположение сгенерированного контента с помощью: before и: after псевдоэлементов. Как показывают их имена, псевдовые элементы: before и: after определяют местоположение содержимого до и после содержимого дерева элементов элемента. Свойство "content" в сочетании с этими псевдоэлементами указывает, что вставляется.

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

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

Помимо вопроса о том, что определено как "контент" , мы также можем учитывать тот факт, что псевдоэлементы представлены как (хотя это технически они не являются) DOM-дочерними элементами элемента, к которому они применяются. Тот факт, что самозакрывающиеся теги не могут иметь детей DOM, похоже, подтверждает идею о том, что самозакрывающиеся теги не должны иметь псевдоэлементов.

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

.test {
  display: inline;
  visibility: hidden;
}

span + *::after {
  visibility: visible;
  color: green;
  content: 'YES';
}
<h3>Which Self-Closing Tags Support Pseudo Elements?</h3>
<div><span>Text Input:</span> <input type="text" class="test"></div>
<div><span>Checkbox Input:</span> <input type="checkbox" class="test"></div>
<div><span>Radio Input:</span> <input type="radio" class="test"></div>
<div><span>Submit Input:</span> <input type="submit" class="test"></div>
<div><span>Reset Input:</span> <input type="reset" class="test"></div>
<div><span>Button Input:</span> <input type="button" class="test"></div>
<div><span>Image:</span> <img class="test"></div>
<div><span>Line Break:</span> <br class="test"></div>
<div><span>Horizontal Rule:</span> <hr class="test"></div>
<div><span>Link:</span> <link class="test"></div>
<div><span>Meta:</span> <meta class="test"></div>

Ответы

Ответ 1

В соответствии с спецификацией CSS 2.1,

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

Но текущий черновик селекторов уровня 3 говорит только

Псевдоэлементы:: before и:: after могут использоваться для описания созданный контент до или после содержимого элемента. Они есть объяснено в CSS 2.1

CSS 2.1 определяет замененные элементы следующим образом:

Элемент, содержимое которого выходит за рамки форматирования CSS модель, например изображение, встроенный документ или апплет.

Содержание замененных элементов не рассматривается в модели рендеринга CSS.

Согласно MDN,

Типичные заменяемые элементы: <img>, <object>, <video> или формы элемент, например <textarea>, <input>. Некоторые элементы, например <audio> или <canvas> заменяются только в определенных случаях.

Следовательно, использование :before или :after с замененными элементами приведет к получению ненадежных результатов.