Question

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

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

（参考＆＃34;虚拟最后一个孩子＆＃34;来自MDN页面here）

当然，像div这样的元素会有内容＆＃34;＆＃34;它和最后一个孩子＆＃34; ::之后＃34;将被插入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尝试表明这是正确的。

我阅读了最终引导我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.

（＆＃34;替换元素的定义＆＃34;见here）

现在，关于::after和::before的精确假设是这些伪元素仅适用于＆＃34;可渲染＆＃34;不能归类为＆＃34;替换元素的元素＆＃34; （请注意，这个经过改进的假设现在排除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伪元素，因为没有人确切知道如何根据CSS实现br并且每个浏览器都以自己的方式执行（因为HTML和CSS实际上都没有定义它）。

head元素及其任何后代可以拥有::before和::after个伪元素 - 您所要做的就是更改{{1}除display之外的其他内容。显然，它们不应该被展示，但这并不能阻止任何想要聪明的人。

就CSS而言，none和input都被视为已替换元素，即使textarea具有开始标记，结束标记和内容。是否是否已被替换为元素（即使在section 14.5 of WHATWG HTML中也未提及），但大多数浏览器默认将它们渲染为替换元素，行为通常无法改变。并且出于textarea和::before伪元素不被支持的目的，这一切都很重要。

Answer 2

不要猜，请阅读：https://drafts.csswg.org/selectors-3/#gen-content

::之前和::之后的伪元素可用于描述元素内容之前或之后生成的内容。

input没有内容，因此不显示after元素。同样适用于没有内容的每个HTML元素（br，menuitem，link ...）。所有自动关闭标记都没有内容，而其他一些标记（如script）也没有。

在HTML中，do :: after和::之前的伪元素仅适用于可渲染的＆＃34;未替换的＆＃34;元素？

2 个答案: