134

我正在尝试将:before伪元素与元素一起使用img。

考虑一下这个 HTML 和 CSS...

HTML

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

CSS

img:before {
  content: "hello";
}

js小提琴。

这不会产生预期的效果（在 Chrome 13 和 Firefox 6 中测试）。但是，它适用于divorspan元素。

为什么不？

有没有办法让伪元素与img元素一起工作？

4

3 回答 3

145

规范说...

笔记。本规范并未完全定义替换元素（如 HTML 中的 IMG）之间的交互:before以及与替换元素的交互。:after这将在未来的规范中更详细地定义。

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

另请参阅此答案。

于 2011-09-13T03:25:28.823 回答
8

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

于 2012-06-14T16:18:41.403 回答
6

只是为了测试并知道它不漂亮，您可以执行以下操作以使伪元素与“img”元素一起使用。

将：添加display: block; content: ""; height: (height of image)px 到 CSS 中的 img 元素。

虽然它会使您的 img 标签为空，但content: ""您可以

将：添加style="background-image: url(image.jpg)" 到 html 中的 img 元素。

在 Fx、Chrome 和 Safari 中对此进行了测试

于 2012-09-01T08:19:19.623 回答