css - 为什么:before和:after伪元素不能与`img`元素一起使用？

Question

This question already has answers here:

Does :before not work on img elements?
                                
                                    （12个答案）
                                
                        
                        
                             CSS :after not adding content to certain elements
                                
                                    （3个答案）
                                
                        
                                5年前关闭。
            
                    
我试图将 :before pseudo element与 img元素一起使用。

考虑一下HTML和CSS ...

的HTML

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt="" />

的CSS

img:before {
  content: "hello";
}

jsFiddle。

这不会产生预期的效果（已在Chrome 13和Firefox 6中测试）。但是，它与 div或 span元素一起使用。

为什么不？

有没有一种方法可以使伪元素与 img元素一起使用？

最佳答案

The spec says ...


  注意。本规范未完全定义:before和:after与替换元素（例如HTML中的IMG）的交互。这将在以后的规范中更详细地定义。


我猜这意味着它们暂时不使用img元素。

另请参见this answer。

关于css - 为什么:before和:after伪元素不能与`img`元素一起使用？ ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52738248/

上一篇：css - 如何将奇偶行 css 应用于动态加载的组件？

下一篇：css - 如何定位动态大小的图像与顶部边框齐平？

Answer 1

The spec says ...


  注意。本规范未完全定义:before和:after与替换元素（例如HTML中的IMG）的交互。这将在以后的规范中更详细地定义。


我猜这意味着它们暂时不使用img元素。

另请参见this answer。