html - 在 HTML 中，do::after 和::before 伪元素只适用于可渲染的 "non-replaced"元素吗？

Question

我最近在一个元素中注意到 ::after 伪元素没有在 input 元素之后添加任何内容:

input::after { content: "xxxxxxxxxx"; } // no "virtual last child" inserted into DOM "after" the input

(对“虚拟最后一个 child ”的引用来自 MDN 页面 here)

当然，像 div 这样的元素在它“之后”会有内容，最后一个子元素“::after”将被插入到 DOM 中:

div:empty::after { content: "xxxxxxxxxx"; }

//In DOM
<div>::after</div>

但在这些情况下没有插入任何内容:

head, script { content: "qaqaqa"; }

我最初的假设是浏览器呈现的任何带有应关闭标签(例如 p、body、html、div 等)的 HTML 元素都将具有 ::after 作为最后一个子元素插入(::before 作为第一个子元素插入)，而不适合它的元素(例如，script、head、img、br、input、.. .etc) 不会表现出这种行为。我的 CodePen 尝试表明这是正确的。

我通读了文档，最终找到了 this resource ，其中一条注释写道:

 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.

(“替换元素”的定义见 here )

所以现在我关于 ::after 和 ::before 的精炼假设是这些伪元素仅适用于“可呈现”元素不能归类为“替换元素”(请注意，这个改进的假设现在排除了 textarea 与 ::after/::before 一起使用，而我的最初的假设是包含它 - textarea::after 是用 CodePen 测试的，没有 ::after 最后一个子元素被插入到 DOM 中)。

改进的假设是否正确？

Answer 1

HTML 没有定义哪些元素是替换元素或者哪些元素可以包含::before和 ::after伪元素。 CSS2.1 或 selectors-3 也没有。 css-content-3的最新重写, 然而，非常明确地指出:

Replaced elements do not have '::before' and '::after' pseudo-elements

尽管实现当然与草案(著名的或其他的，WebKit/Blink)不一致，因为到目前为止还没有定义。

一个元素是否可以有::before和 ::after伪元素不是由其内容模型定义的(即它是否为 void 或其他)，或者它是否具有结束标记，在 HTML 中。而且，其中很多都是依赖于实现的。例如，一些实现允许 br万事俱备::before和 ::after伪元素，因为没有人确切地知道如何 br应该根据 CSS 来实现，并且每个浏览器都以自己的方式执行(因为 HTML 和 CSS 都没有真正定义它)。

A head元素及其任何后代可以有::before和 ::after伪元素——你所要做的就是改变它们的 display到none以外的东西.显然，它们不应该被展示出来，但这并不能阻止任何人想变聪明。

就CSS而言，input和 textarea都被视为替换元素，即使 textarea具有开始标记、结束标记和内容。这些元素是否应该或必须没有说明(甚至在section 14.5 of WHATWG HTML中也没有)，但大多数浏览器默认将它们呈现为替换元素，并且这种行为通常不能改变。并且为了 ::before 的目的和 ::after不支持伪元素，这才是最重要的。