before、after伪类用在＜img＞标签上失效的问题

参考链接

https://www.w3.org/TR/CSS21/generate.html#before-after-content

问题

before、after伪类用在标签上失效

原因

before和:after伪元素指定生成内容的样式和位置。正如它们的名称所示，:before和:after伪元素指定了document tree content内容之前和之后的内容位置。content属性与这些伪元素一起指定要插入的内容。

文中的document tree content，对于 img 这种单标签，似乎不存在内容或子元素在标签中，所以选择器没有生效。实际上标准中还有一行注释：

W3C标准中里面是这么说的：

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.

对于可替换元素，标准并没有清晰定义，这也导致了浏览器实现的差异性。