伪元素可以应用于::自闭元素之前和之后

Question

我对了解何时可以将::before和::after伪元素应用于自动关闭标签特别感兴趣。根据W3生成的内容CSS规范，这是这些伪元素的定义：

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>

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

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

我注意到“生成的内容规范”底部的一行显示：

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

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

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

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

Answer 1

根据CSS 2.1规范，

该规范并未完全定义：before和：after与替换元素（例如HTML中的IMG）的交互。这将在以后的规范中更详细地定义。

但是当前的Selectors Level 3草案只说

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

CSS 2.1定义了如下替换元素：

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

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

根据MDN，

典型替换元素是<img>，<html" target="_blank">object>，<video>或类似形式的元件<textarea>，<input>。某些元素，例如<audio>或
<canvas>仅在特定情况下被替换的元素。

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