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

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

Исходя из этого, кажется, что эти псевдоэлементы предназначены для изменения содержимого элемента. Насколько я понимаю (хотя я не могу найти авторитетный источник для поддержки этого), «контент» определяется более или менее как «материал между открывающим и закрывающим тегами»; поэтому я думаю, что элементы, которые не имеют «контента» (например, HTMLbr тег) не должен поддерживать::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>

Является ли моя интерпретация::before а также::after спецификация неверна? Является ли мое определение «содержимого» элемента неверным? Я ищу ответы с авторитетными ответами, которые объясняют, что сделал бы «идеальный браузер», если бы он реализовал эти псевдоэлементы в сочетании с самозакрывающимися тегами HTML точно в соответствии со спецификациями W3 CSS.

Редактировать: Относительно "Замененных Элементов"

Я заметил строку внизу сгенерированных спецификаций контента, которая гласила:

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

Это может быть как-то связано с ответом. В соответствии сэта спецификация«Замененный элемент» определяется как:

Элемент, содержимое которого выходит за рамки модели форматирования CSS, например изображение, встроенный документ или апплет. Например, содержимое HTML-элемента IMG часто заменяется изображением, которое обозначает его атрибут «src». Замененные элементы часто имеют внутренние размеры: внутреннюю ширину, внутреннюю высоту и внутреннее соотношение.

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