为什么 CSS `:before` 不能在内联 SVG 元素上工作？

CSS :before 在内联 SVG

简介

使用 :before 和 :after 伪元素设置内联 SVG 元素的样式是 Web 中的常见任务发展。但是，了解对替换元素（包括 SVG）施加的限制非常重要。

问题

在给定的代码示例中，应用于 SVG 元素的 :before 样式未反映出来，表示生成的内容可能不适用于 SVG。

替换的元素和生成的内容

内联 SVG 是被视为替换元素，这意味着它不是内容流的一部分，而是取代父元素。另一方面，生成的内容是使用 :before 和 :after 等伪元素插入到文档树中的内容。

CSS 规范

CSS 中生成内容的规范定义在“CSS3 生成并替换内容模块。”根据此文档，替换元素内不允许生成内容。这解释了示例中 SVG 上的 :before 样式失败的原因。

可能的解决方案：:outside 伪元素

虽然替换元素中不支持生成的内容，但 W3C 文档引用提出了一个解决方案：:outside 伪元素。此伪元素将生成的内容放置在替换元素之外，有效地绕过了限制。不幸的是，目前对 :outside 的支持是有限的。

结论

由于对替换元素的限制，使用 :before 或 :after 设计内联 SVG 样式是不可能的。要解决此问题，请探索替代方法，例如使用类或属性来动态添加具有所需样式的元素。

以上是为什么 CSS `:before` 不能在内联 SVG 元素上工作？的详细内容。更多信息请关注PHP中文网其他相关文章！