为什么不: before 和: after 与‘ img’元素一起工作？

我试图使用一个 :before伪元素和一个 img元素。

考虑这个 HTML 和 CSS..。

超文本标示语言

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

CSS

img:before {
content: "hello";
}

JsFiddle .

这并没有产生预期的效果(在 Chrome13和 Firefox6中测试过)。但是，它适用于 div或 span元素。

为什么不呢？

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

112917 次浏览
小开
最佳答案

说明书上说..。

注意。这个规范没有完全定义 ::before和 ::after与替换元素(比如 HTML 中的 IMG)的交互。这将在未来的规范中进行更详细的定义。

我想这意味着它们不能与 img元素一起工作(目前)。

也请参阅 这个答案。

小开

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

小开

只是为了测试和知道它不好看，您可以执行以下操作来使伪元素与“ img”元素一起工作。

地址: display: block; content: ""; height: (height of image)px 到 CSS 中的 img 元素。

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

地址: style="background-image: url(image.jpg)" 到 html 中的 img 元素。

在 Fx，Chrome 和 Safari 中测试过


提交答案