为什么不：在pseudo元素和`img`元素一起工作之前和之后？
我正在尝试使用一个img元素:before伪元素。
考虑这个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中testing过）。 但是，它适用于div或span元素。
为什么不？
有没有办法让伪元素与img元素一起工作？
规范说 …
注意。 本规范并没有完全定义
:before和:after的replace元素（如HTML中的IMG）的交互。 这将在未来的规范中更详细地定义。
我想这意味着他们不能使用img元素（现在）。
也看到这个答案 。
只是为了testing，并知道它不是很漂亮，你可以做以下使伪元素与'img'元素一起工作。
添加： display: block; content: ""; height: (height of image)px display: block; content: ""; height: (height of image)px display: block; content: ""; height: (height of image)px到CSS中的img元素。
虽然它会呈现你的img标签空的原因的content: ""你可以
在html中添加： style="background-image: url(image.jpg)"到你的img元素。
在Fx，Chrome和Safari上testing了这一点
可能是浏览器供应商没有在img标签上实现伪元素，因为他们对规范的解释：严格来说， img元素不是块级元素或内联元素，它是一个空元素 。
