为什么不：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="" />CSSimg: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严格来说，元素不是块级元素或内联元素，它是一个空元素。