到什么自闭合元素可以::前和::后伪元素应用 [英] To What Self-Closing Elements Can ::before and ::after Pseudo-Elements be Applied

问题描述

我特别想了解 :: before 和 :: after 伪元素应用于自闭合标签。这是这些伪元素的定义，根据 W3生成的内容CSS规范：

I'm particularly interested in understanding when the ::before and ::after pseudo-elements can be applied to self-closing tags. This is the definition of these pseudo-elements, according to the W3 Generated Content CSS Specifications:

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

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 伪元素。

Based on this, it seems that these pseudo-elements are intended to modify the content of an element. As I understand it (although I can't find an authoritative source to support this), "content" is defined more or less as "the stuff between the opening and closing tags"; therefore, I would think that elements which have no "content" (such as an HTML br tag) should not support the ::before and ::after pseudo-elements.

外推这个，元素的内容的定义，我会认为自闭标签的 none 将支持 :: before 和 :: after 伪元素。然而，在实践中，我发现许多自我关闭的标签有完全的支持。

Extrapolating on this, and based on my understanding of the definition of an element's "content", I would think that none of the self-closing tags would support the ::before and ::after pseudo-elements. In practice, however, I've found that many self-closing tags have full support.

除了定义为内容的问题，我们也可以考虑伪元素被表示为（尽管在技术上它们不是）它们被应用到的元素的DOM子元素的事实。事实上，自闭合标签不能有DOM孩子似乎支持自闭症标签不应该有伪元素的想法。

Aside from the question of what is defined as "content", we can also consider the fact that pseudo-elements are represented as (although technically they aren't) DOM children of the element to which they are applied. The fact that self-closing tags cannot have DOM children seems to support the idea that self-closing tags oughtn't have pseudo-elements.

在我试图找到回答这个问题，我把一个小测试，以确定哪些自我关闭的标签（我选择了他们中的一小部分）支持 :: before 和 :: after 后，我已将该测试嵌入下面的代码段。我通过浏览器获得了截然不同的结果，并且可以找到很少的一致性。

In my attempt to find the answer to this question, I put together a small test to determine which self-closing tags (I picked a handful of them as they came to mind) support ::before and ::after, and I've embedded that test in a snippet below. I am getting radically different results across browsers and can find very little consistency.

.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标签实现这些伪元素。

Is my interpretation of the ::before and ::after specification incorrect? Is my definition of an element's "content" incorrect? I am looking for answers with authoritative answers which explain what the "perfect browser" would do if it were to implement these pseudo-elements in conjunction with self-closing HTML tags exactly according to W3 CSS specifications.

编辑：关于替换的元素

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

I noticed a line at the bottom of the Generated Content Specs that said:

注意。本规范没有完全定义：被替换的元素（例如HTML中的IMG）之前和之后的交互。这将在未来的规范中更详细地定义。

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 might have something to do with the answer. According to this spec, a "replaced element" is defined as:

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

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规范中替换的元素的列表，但我可以很容易地看到大多数（或所有）自闭合标签作为拟合该定义。我也不确定第一个笔记中提到的未来规范是否已经完成。

I can't find an authoritative list of replaced elements in the HTML spec, but I could easily see most (or all) self-closing tags as fitting that definition. I'm also not sure if the "future specification" alluded to in the first note was ever completed.

推荐答案

CSS 2.1规范，

这个规范没有完全定义在
和：after之后与替换的元素（例如HTML中的IMG）之间的交互。这将是在未来规范中更详细定义的
。

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.

但是目前选择器级别的草案3 只是说

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

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 定义替换的元素，如下所示：

CSS 2.1 defines replaced elements like this:

在CSS格式化
模型的范围之外，例如图像，嵌入文档或小程序。

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

被替换的元素的内容不在CSS渲染模型。

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

据的 MDN ，

典型的替代元素是< IMG> ，< object> ，< video> 如< textarea> ，< input> 。一些元素，如<音频> 或
<画布> 替换元素只能在特定的情况下， 。

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.

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

Therefore, using :before or :after with replaced elements will produce unreliable results.

这篇关于到什么自闭合元素可以::前和::后伪元素应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！