为什么不使用：before和：after伪元素使用`img`元素？ [英] Why don't :before and :after pseudo elements work with `img` elements?

问题描述

我尝试使用 ：之前伪元素与 img 元素。

考虑这个HTML和CSS ..

HTML

 < img src =http： /0.gravatar.com/avatar/this-is-not-a-hashalt =/> 
  

CSS

  img：before {
 content：hello; 
} 
  

jsFiddle 。

这不会产生所需的效果（在Chrome 13和Firefox 6中测试）。但是，它适用于 div 或 span 元素。

为什么不？

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

解决方案

规范说 ...

注意， 本规范没有完全定义：之前的和：之后与替换的元素（如HTML中的IMG） 。这将在未来的规范中更详细地定义。

我想这意味着他们不能使用 img 元素（现在）。

另请参阅此回答。

I am trying to use a :before pseudo element with an img element.

Consider this HTML and CSS...

HTML

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt="" />

CSS

img:before {
  content: "hello";
}

jsFiddle.

This does not produce the desired effect (tested in Chrome 13 and Firefox 6). However, it works with a div or span element.

Why not?

Is there a way to make pseudo elements work with img elements?

解决方案

The spec says...

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

I guess this means they don't work with img elements (for now).

Also see this answer.

这篇关于为什么不使用：before和：after伪元素使用`img`元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！