在HTML中,do :: after和::之前的伪元素仅适用于可渲染的"非替换"元素？

Question

我最近注意到一个项目::after假元素没有在input元素后面添加任何内容:

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

(参考"虚拟最后一个孩子"是从MDN页面这里)

当然,诸如div之类的元素将具有"之后"的内容,并且最后一个子节点":: after"将被插入到DOM中:

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

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

但在这些情况下没有插入任何东西:

head, script { content: "qaqaqa"; }

我最初的假设是,浏览器使用应该关闭的标签(.eg,p,body,html,div,....等)呈现的任何HTML元素都::after将作为最后一个子项::before插入(并插入为第一个孩子),而不适合这个的元素(例如,脚本,头,img,br,输入......等)不会表现出这种行为.我的CodePen尝试表明这是正确的.

我阅读了最后引导我访问此资源的文档,其中的一条注释如下:

 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.

(有关"替换元素"的定义,请参见此处)

所以,现在我精的假设有关::after,并::before是这些pseudoelements只适用于作为"替换元素"(请注意,这精致的假设,现在排除了无法归类"渲染"元素textarea从使用::after/ ::before,而我最初的设想会包括它- textarea::after是使用CodePen进行测试,并且没有::after最后一个子项插入到DOM中.

请问精致的假设是正确的？

Answer 1

HTML不限定哪些元素替换元素或元素可以包含::before和::after伪元素.CSS2.1或selectors-3也没有.然而,css-content-3的最新重写非常清楚:

替换元素没有':: before'和':: after'伪元素

虽然实施当然与草案(着名或其他,WebKit/Blink)不一致,因为这迄今尚未定义.

元素是否可以拥有::before和::after伪元素不是由其内容模型定义的(即,如果它是无效的或其他方式),或者它是否具有结束标记,在HTML中.而且,其中很多都是依赖于实现的.例如,一些实现允许br所有东西::before和::after伪元素,因为没有人确切知道br应该如何用CSS实现,每个浏览器都以自己的方式实现(因为HTML和CSS实际上都没有定义它).

一个head元素及其任何后代能有::before和::after伪元素-所有你需要做的就是改变自己display比其他的东西none.显然,他们不应该被展示,但这并不能阻止任何人试图变得聪明.

至于CSS而言,input并textarea都认为替换元素,即使textarea有一个开始标记,结束标记和内容.是否应该或必须更换这些元素是没有说明的(甚至在WHATWG HTML的第14.5节中也没有说明),但是大多数浏览器默认将它们渲染为替换元素,并且这种行为通常无法更改.而针对的目的::before和::after所支持的不是伪元素,这是最重要的.