Html 可以将：：before和：：after伪元素应用于哪些自关闭元素

我特别感兴趣的是理解何时可以将

：：before

和

：：after

伪元素应用于自动关闭标记。这是这些伪元素的定义，根据：

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

基于此，这些伪元素似乎旨在修改元素的内容。据我所知（尽管我找不到权威的来源来支持这一点），“内容”或多或少被定义为“开始标记和结束标记之间的内容”；因此，我认为没有“内容”的元素（例如HTML

br

标记）不应该支持

：before

和

：：after

伪元素

在此基础上，根据我对元素“内容”定义的理解，我认为所有自动关闭标记都不支持

：before

和

：：after

伪元素。然而，在实践中，我发现许多自动关闭标签都有完全的支持

除了定义什么为“内容”的问题外，我们还可以考虑这样一个事实，即伪元素被表示为（尽管技术上不是）它们所应用的元素的DOM儿童。自关闭标记不能有DOM子元素这一事实似乎支持了自关闭标记不应该有伪元素的观点

在我试图找到这个问题的答案时，我做了一个小测试，以确定哪些自动关闭标记（我在想到它们时挑选了一些）支持

：：before

和

：：after

，我将该测试嵌入了下面的一个片段中。我在不同的浏览器中得到了完全不同的结果，而且几乎找不到一致性

.test{
显示：内联；
可见性：隐藏；
}
span+*：：之后{
能见度：可见；
颜色：绿色；
内容：“是”；
}

哪些自动关闭标记支持伪元素？
文本输入：
复选框输入：
无线电输入：
提交输入：
重置输入：
按钮输入：
图片：
换行符：

水平规则：

链接：
Meta:

根据

本规范没有完全定义：before的交互 和：之后使用替换的元素（如HTML中的IMG）。这将是 在将来的规范中更详细地定义

但唯一的答案是

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

定义替换的元素，如下所示：

内容超出CSS格式范围的元素 模型，例如图像、嵌入文档或小程序

CSS呈现模型中不考虑替换元素的内容

根据,

典型的替换元素是

、

、

或表单 元素，如

，

。一些元素，如

或

仅在特定情况下被替换

---

因此，使用替换元素的

:before

或

:before

将产生不可靠的结果。

一个

标记确实有内容，它本质上包含一个隐式换行符。在每次中断后添加内容可能会很有用，例如回车图标或其他内容。很多自动关闭标签都有

：before

和

：after

的用例<代码>+1不过，问得好。@CarlSmith所以你认为我对“内容”的定义不正确（这是很有可能的）。然而，按照这种逻辑，为什么大多数浏览器不支持

：：before

，比如，文本字段输入，它的“内容”至少与

br

标记一样多？你知道我在哪里可以找到元素“内容”的正式定义吗？对不起，不。我不是说你错了，只是这段文字的写法让人觉得你是在表达你对标签如何工作的看法，这让读者感到困惑。我想在之后工作。否则这是个好问题，我不知道答案。@CarlSmith，啊哈，我明白了。我把那句话改了一点。作为记录，我同意可以方便地将

：：before

和

：：after

应用于某些自动关闭标签。我一直用它来制作自定义样式的复选框。但我想知道正确的做法是什么。因此，如果浏览器稍后突然决定“修复”此行为，我不会感到惊讶。这是一个很好的问题，而且我从未找到明确的方法来定义替换的元素，它们只是浏览器选择通过替换内容来呈现的元素。一点历史会有帮助。在早期的浏览器中，表单元素的内部被委托给操作系统来呈现，就像本地应用程序一样。这些是“替换”的元素。随着浏览器的成熟，它们接管了呈现（即不再被替换），但在某些情况下需要保留“被替换”的元素呈现行为，以避免破坏页面。结果是一组不连贯的渲染。所有的自动关闭标签都是“替换元素”吗？@WoodrowBarlow似乎没有替换元素的列表。HTML5有一个章节说一些元素可能会被替换掉，但这只是一组建议。