自闭包元素可以::前面和:之后的伪元素被应用到什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (58)

我特别想了解一下::before::after伪元素可应用于自关闭标记。这是这些伪元素的定义,根据W3生成的内容CSS规范:

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

基于此,这些伪元素似乎旨在修改元素的内容。“内容”被定义为“开始标记和结束标记之间的内容”;因此,我认为没有“内容”的元素(例如HTML)br标记)不支持::before::after伪元素。

除了什么被定义为“内容”的问题之外,我们还可以考虑这样一个事实,即伪元素被表示为应用它们的元素的DOM子元素。

在试图找到这个问题的答案时,我做了一个小测试:

.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>

我对元素“内容”的定义不正确?我正在寻找与权威答案的答案。

提问于
用户回答回答于

根据CSS2.1规范

此规范没有完全定义与替换元素(例如HTML中的IMG)之间的交互。这将在未来的规范中得到更详细的定义。

但是,http://dev.w3.org/csswg/selectors3/#gen-content只说

前和::后伪元素可以用来描述在元素内容之前或之后生成的内容。它们在CSS 2.1中作了解释。

CSS 2.1定义以下替换元素:

其内容超出CSS格式模型范围的元素,如图像、嵌入式文档或applet。在CSS呈现模型中不考虑替换元素的内容。

根据n.MDN

典型的替换元素是<img><object><video>或窗体元素,如<textarea><input>。有些元素,比如<audio><canvas>仅在特定情况下替换元素。

因此,使用:before:after用替换的元素将产生不可靠的结果。

扫码关注云+社区

领取腾讯云代金券