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

Question

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

12.1 The :before and :after pseudo-elements: Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.

由此看来，这些伪元素似乎是为了修饰一个元素的内容。据我了解(虽然我找不到权威来源来支持这一点)，“内容”或多或少被定义为“开始和结束标签之间的东西”；因此，我认为没有“内容”的元素(例如 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 标签结合使用会做什么。

---

编辑:关于“替换元素”

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

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

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

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its "src" attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio.

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

Answer 1

根据CSS 2.1 spec ,

This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

但是current draft of Selectors Level 3只说

The ::before and ::after pseudo-elements can be used to describe generated content before or after an element's content. They are explained in CSS 2.1

CSS 2.1像这样定义替换元素:

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet.

The content of replaced elements is not considered in the CSS rendering model.

根据 MDN ,

Typical replaced elements are <img>, <object>, <video> or forms element like <textarea>, <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases.

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