Css 为什么不'；t:before和：after伪元素与'img'元素一起工作？

我试图将a与

img

元素一起使用

考虑一下这个HTML和CSS

HTML

这不会产生期望的效果（在Chrome13和Firefox6中测试）。但是，它与

div

或

span

元素一起工作

为什么不呢

有没有办法让伪元素与

img

元素一起工作？

注意。本规范未完全定义

：before

和

：after

与替换元素（如HTML中的IMG）之间的交互。这将在未来的规范中进行更详细的定义

我猜这意味着它们不使用

img

元素（目前）

---

另请参见。

可能是浏览器供应商没有在

img

标记上实现伪元素，因为他们对规范的解释：

img

元素严格来说不是块级元素或内联元素，它是一个.

仅用于测试，并且知道它并不漂亮。您可以执行以下操作，使伪元素与“img”元素一起工作

添加：

显示：块；内容：“；高度：（图像高度）px

添加到CSS中的img元素

虽然它会使您的img标签变空，但由于

内容：“

您可以这样做

添加：

style=“背景图像：url（image.jpg）”

在html中添加到img元素

---

在Fx、Chrome和Safari中测试了这一点

真正的SOer应该在回答自己+1；-）3分钟后问一个问题这是未来，仍然没有规格……2017年在这里，同样。2019年，8年过去了。我们到底什么时候才能到达未来？将近10年后，我们中的许多人都是白发，有些人已经去世了。我们有自动驾驶汽车，但图像上的伪元素是我们无法理解的一点技术。我写了一个相关的答案（不是很好）：这似乎是正确的，尽管自从HTML3链接（！）以来术语发生了变化。在HTML5中，img被称为“void”元素。void元素的示例包括hr、input和source。请参阅：//一个快速的非正式测试表明，您也不能将伪元素添加到输入元素中。Mac Firefox 17似乎不起作用。只有在Firefox 23中，如果图像标记的src不存在（404），我才对我起作用。我通过将img包装为span解决了这个问题。是的，有点粗俗，但在某些场合有效。

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

img:before {
  content: "hello";
}