为什么不：before和：after伪元素与`img`元素一起使用？

Question

为什么不：before和：after伪元素与`img`元素一起使用？

我试图用一个:before伪元素与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中测试）。但是，它适用于a div或span元素。

为什么不？

有没有办法让伪元素与img元素一起使用？

Answer 1

规范说 ......注意。本规范不完全定义的相互作用:before和:after与替换元素（如IMG在HTML）。这将在未来的规范中更详细地定义。我想这意味着他们不使用img元素（现在）。

Answer 2

只是为了测试并且知道它不漂亮，你可以做以下事情来使伪元素与'img'元素一起使用。添加：display: block; content: ""; height: (height of image)px 到CSS中的img元素。虽然它会使你的img标签成为空的原因content: ""然后你可以style="background-image: url(image.jpg)" 在html中添加：到你的img元素。在Fx，Chrome和Safari中进行了测试

Answer 3

可能是浏览器供应商没有在img标签上实现伪元素，因为它们对规范的解释：img严格来说，元素不是块级元素或内联元素，它是一个空元素。