很久以前,有一个 CSS3生成内容规范的草案,允许内容属性 for any HTML element(不仅仅是:: before / ::之后的伪元素),对空或替换的元素没有任何正式的限制. Opera Presto曾经支持( 1,2),至少在一定程度上由WebKit( 3)支持.到2011年底,WebKit对img元素的内容的实现似乎有效地将其从空的替换元素转换为非替换元素,如span(甚至其上下文菜单已更改,删除诸如“将图像另存为…”等选项).它也使得可以应用像img :: before之类的伪元素.

在目前的Blink(Chrome等)实现中,将内容属性转换为img元素没有明显的效果.但是,img元素显然具有不同的结构,这取决于它是否正确加载或被破坏：如果加载,它将由DOM Inspector显示为一个简单的空元素,但如果被破坏,则会暴露内部的Shadow DOM结构,如下所示：

<div id="alttext-container" style="overflow: hidden; border: 1px solid silver; display: inline-block; Box-sizing: border-Box; padding: 1px;">
  <img id="alttext-image" width="16" height="16" align="left" style="margin: 0px; float: left; display: inline;">
  <div id="alttext" style="overflow: hidden; display: block;">Alt text</div>
</div>

可能是因为破坏的img在阴影divs的帮助下显示,所以在这种情况下可以应用伪元素(4).

当前WebKit不支持img的伪元素.但是,有趣的是,至少iOS 9.2.1 Safari在为img(5)设置content属性后才开始支持.

为什么这个财产有这样的变化？我猜,如果一个空元素获得任何内容(甚至生成),浏览器必须提供一些东西来显示这个内容,有效地用某种容器替换空元素(如Blink的shadow div id =“alttext-container” ),并且该容器可以具有伪.我错了吗？这个行为是不是从最新的WebKit版本中删除？