为什么`:before`和`:after`伪元素不能与`img`元素一起使用？

Question

我正试图在 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 中不能产生期望的效果。然而，它可以与 div 或 span 元素一起使用。

为什么呢？

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

- alex

---

我写了一个（不是很好的）相关答案：https://dev59.com/dWw05IYBdhLWcg3w6GAw - thirtydot

Answer 1

规范说明...

注意。本规范未完全定义 ::before 和 ::after 与替换元素（如HTML中的IMG）的交互。这将在未来的规范中详细定义。

我猜这意味着它们现在不能与 img 元素一起使用。

另请参见此答案。

- alex

---

真正的 Stack Overflow（SO）用户应该先提出一个问题，然后在回答自己之后的3分钟内点赞自己的回答。+1 ;-） - zerkms

未来了，仍然没有规格说明... - Madara's Ghost

2017年，一样。 - Hjalmar

现在是2023年，已经过去了8年。我们什么时候才能真正迎来未来呢？ - v3ntus

将近10年过去了，我们中的许多人已经白发苍苍，有些人已经离开了人世。我们拥有了自动驾驶汽车，但图像上的伪元素仍然是一项我们无法解决的技术难题。 - Kellen

Answer 2

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

- Joel Glovier

---

这似乎是正确的，尽管自那个 HTML3 链接以来术语已经发生了变化。在 HTML5 中，img 被称为“void”元素。无内容元素的示例包括 hr、input 和 source。参见：http://dev.w3.org/html5/markup/syntax.html#void-element // 一些简单的非正式测试表明，您也不能向 input 元素添加伪元素。 - Ben

Answer 3

仅用于测试和了解，如果您想使伪元素与“img”元素一起工作，可以执行以下操作：

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

尽管由于content: ""而渲染出空的img标签，但是您可以在html中添加：

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

在Fx、Chrome和Safari中测试过。

- Ferdi Emmen

---

似乎无法在Mac Firefox 17上运行。 - biziclop

只有当图像标签具有不存在的src（404）时，它才适用于我的Firefox 23。 - thenickdude

我通过将img包装到span中来解决了这个问题。有点取巧，但在某些情况下有效。 - Jaakko Karhu