为啥 :before 和 :after 伪元素不能与 `img` 元素一起使用？ [复制]

Posted 2023-03-05

【中文标题】为啥 :before 和 :after 伪元素不能与 `img` 元素一起使用？ [复制]

【英文标题】：Why don't :before and :after pseudo elements work with `img` elements? [duplicate]为什么 :before 和 :after 伪元素不能与 `img` 元素一起使用？ [复制]

【发布时间】：2011-11-15 19:46:40

【问题描述】：

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

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

HTML

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

CSS

img:before 
  content: "hello";

jsFiddle.

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

为什么不呢？

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

【问题讨论】：

我写了这个（不是很好）相关的答案：***.com/questions/6949148/…

【参考方案1】：

The spec says...

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

我猜这意味着它们不适用于 img 元素（目前）。

另见this answer。

【讨论】：

真正的 SOer 应该在回答自己 3 分钟后提出问题，+1 ;-)

这是未来，仍然没有规格......

这里是 2017 年。

2019 年，8 年过去了。我们什么时候才能准确到达未来？

近 10 年后，我们中的许多人都头发花白，有些人已经去世。我们有自动驾驶汽车，但图像上的伪元素是我们无法弄清楚的一点技术。

【参考方案2】：

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

【讨论】：

这似乎是正确的，尽管自 HTML3 链接 (!) 以来术语已经发生了变化。在 HTML5 中，img 就是所谓的“void”元素。空元素的示例包括 hr、input 和 source。请参阅：dev.w3.org/html5/markup/syntax.html#void-element // 快速的非正式测试表明您也不能向输入元素添加伪元素。

【参考方案3】：

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

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

虽然它会使您的 img 标签变为空，因为 content: "" 您可以这样做

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

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

【讨论】：

似乎不适用于 Mac Firefox 17。

如果图像标签的 src 不存在 (404)，则仅适用于 Firefox 23。

我通过将 img 包装到 span 来解决这个问题。是的，是的，但在某些情况下有效。