为什么不:在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过)。 但是,它适用于divspan元素。

为什么不?

有没有办法让伪元素与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元素不是块级元素或内联元素,它是一个空元素 。