html – 在应用伪元素之后,什么自我关闭的元素可以:: before和::

我特别感兴趣的是将:: 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和::之前，我已经在下面的代码片段中嵌入该测试。我在浏览器之间获得截然不同的结果，可以找到很少的一致性。

.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规范中找不到被替换的元素的权威列表，但是我可以很容易地看到大部分(或全部)自我关闭标签适合该定义。我也不知道第一个注释中提到的“未来规范”是否已经完成。

解决方法

根据 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,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.

因此，使用：之前或之后的替换元素会产生不可靠的结果。

html – 在应用伪元素之后,什么自我关闭的元素可以:: before和::

解决方法

相关推荐