哪些自闭元素可以应用::before 和::after 伪元素

Question

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

12.1 :before 和 :after 伪元素：作者使用 :before 和 :after 伪元素指定生成内容的样式和位置。正如它们的名字所示，:before 和:after 伪元素指定了元素文档树内容之前和之后的内容位置。 'content' 属性与这些伪元素一起指定插入的内容。

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

据此推断，并根据我对元素“内容”定义的理解，我认为 none 的自闭合标签将支持 ::before 和 ::after伪元素。然而，在实践中，我发现许多自闭合标签都得到了完全支持。

除了定义什么是“内容”的问题之外，我们还可以考虑这样一个事实，即伪元素被表示为（尽管从技术上讲，它们不是）应用它们的元素的 DOM 子元素。自闭合标签不能有 DOM 子元素这一事实似乎支持了自闭合标签不应该有伪元素的观点。

在我试图找到这个问题的答案时，我进行了一个小测试来确定哪些自闭合标签（我选择了其中的几个）支持::before 和::after，以及我已经将该测试嵌入到下面的 sn-p 中。我在不同浏览器中得到了截然不同的结果，而且几乎没有一致性。

.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>

我对@9​​87654334@ 和::after 规范的解释不正确吗？我对元素“内容”的定义不正确吗？我正在寻找具有权威答案的答案，这些答案解释了“完美浏览器”如果完全按照 W3 CSS 规范实现这些伪元素以及自闭合 HTML 标签会做什么。

---

编辑：关于“替换元素”

我注意到生成的内容规范底部有一行内容：

注意。该规范没有完全定义 :before 和 :after 与替换元素的交互（例如 HTML 中的 IMG）。这将在未来的规范中更详细地定义。

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

其内容超出 CSS 格式化模型范围的元素，例如图像、嵌入文档或小程序。例如，HTML IMG 元素的内容经常被其“src”属性指定的图像所替代。被替换的元素通常具有固有尺寸：固有宽度、固有高度和固有比率。

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

Answer 1

根据CSS 2.1 spec，

本规范并未完全定义 :before 的交互 和 :after 替换元素（例如 HTML 中的 IMG）。这将成为;这将是 在未来的规范中更详细地定义。

但current draft of Selectors Level 3 只说

::before 和 ::after 伪元素可用于描述 在元素内容之前或之后生成的内容。他们是 在 CSS 2.1 中解释

CSS 2.1 定义替换元素如下：

内容超出 CSS 格式范围的元素 模型，例如图像、嵌入式文档或小程序。

CSS 渲染模型中不考虑替换元素的内容。

根据MDN，

典型的替换元素是<img>、<object>、<video> 或表单 像<textarea>、<input> 这样的元素。一些元素，如<audio> 或 <canvas> 仅在特定情况下被替换元素。

因此，将:before 或:after 与替换元素一起使用会产生不可靠的结果。