为什么伪元素不能与 CSS 中的 `` 标签一起使用？

伪元素和图像元素：CSS 难题

尽管 :before 和 :after 在 CSS 中具有广泛的适用性，但它们的图像元素 () 的功能仍然是一个令人费解的例外。如下面的代码片段所示，向 img 元素添加伪元素不会产生预期的结果：

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

img:before {
  content: "hello";
}

虽然它与 div 和 span 等其他元素无缝协作，但所需的效果是应用于 img 元素时不存在。

幕后：CSS规范

CSS 规范揭示了这种差异。它明确指出伪元素和替换元素（包括 HTML 中的 img）之间的交互在当前版本中尚未完全定义。这意味着当前规范没有指定带有 img 元素的伪元素的行为。

潜在的解决方案：等待标准化

但是，这种情况可能不会无限期地持续下去。该规范建议伪元素和替换元素之间的交互将在未来版本中进一步定义。这让我们期望 img 元素最终将以更全面和一致的方式支持伪元素。

在那之前，希望使用 img 元素实现类似效果的开发人员可能需要考虑替代方法，例如使用 JavaScript 或在 img 周围创建额外的包装元素。

以上是为什么伪元素不能与 CSS 中的 `` 标签一起使用？的详细内容。更多信息请关注PHP中文网其他相关文章！