我正在尝试使用带有img元素的:before pseudo element。
考虑这个HTML和CSS ...
<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt="" />
img:before {
content: "hello";
}
这不会产生预期的效果（在Chrome 13和Firefox 6中测试过）。但是，它适用于div或span元素。
为什么不呢？
有没有办法让伪元素与img元素一起使用？
答案 0 :(得分：115)
The spec says ...
请注意。此规范未完全定义
:before和:after与替换元素（例如HTML中的IMG）的交互。这将在未来的规范中更详细地定义。
我想这意味着它们不适用于img元素（暂时）。
另见this answer。
答案 1 :(得分：6)
只是为了测试并且知道它不漂亮，你可以做以下事情来使伪元素与'img'元素一起使用。
添加：display: block; content: ""; height: (height of image)px
到CSS中的img元素。
虽然它会将您的img标记呈现为空content: ""，但您可以
添加：style="background-image: url(image.jpg)"
到html中的img元素。
在Fx，Chrome和Safari中进行了测试
答案 2 :(得分：5)
可能是浏览器供应商没有在img标签上实现伪元素，因为它们对规范的解释：严格来说，img元素不是块级元素或内联元素元素，它是empty element。