问自闭合元素可以应用::before和::after伪元素

EN

我特别想了解何时可以将::before和::after伪元素应用于自结束标记。根据W3 Generated Content CSS Specifications，这是这些伪元素的定义

12.1 :before和:after伪元素：Authors使用:before和:after伪元素指定生成内容的样式和位置。顾名思义，:before和:after伪元素指定元素的文档树内容之前和之后的内容位置。“content”属性与这些伪元素一起指定要插入的内容。

基于此，这些伪元素似乎旨在修改元素的内容。根据我的理解(尽管我找不到权威的来源来支持这一点)，“内容”或多或少被定义为“开始标记和结束标记之间的东西”；因此，我认为没有“内容”的元素(比如HTML标记)不应该支持::before和::after伪元素。

然而，在实践中，我发现许多自关闭标签都有完整的支持。

自闭合标记不能有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规范的解释是错误的吗？我对元素的“内容”的定义是不正确的吗？我正在寻找的答案与权威的答案，解释了什么是“完美的浏览器”会做什么，如果它是实现这些伪元素与自动关闭的超文本标记语言标签完全按照W3的CSS规范。

编辑:关于“替换的元素”

我注意到在生成的内容规范的底部有一行，上面写着：

注释。本规范并没有完全定义:before和:after与被替换元素(比如HTML中的IMG )之间的交互。这将在未来的规范中进行更详细的定义。

这可能与答案有关。根据this spec的定义，“替换元素”定义为：

内容在CSS格式设置模型范围之外的元素，如图像、嵌入文档或applet。例如，HTML IMG元素的内容通常替换为其"src“属性指定的图像。被替换的元素通常具有固有尺寸:固有宽度、固有高度和固有比率。

我在HTML规范中找不到被替换的元素的权威列表，但我可以很容易地看到大多数(或所有)自闭合标签都符合这个定义。我也不确定第一个注释中提到的“未来规范”是否已经完成。