CSS :before 和 :after 伪元素可以设置内联 SVG 样式吗？

使用 CSS :before 和 :after 设置内联 SVG 样式

使用 CSS :before 和 :after 伪元素设置内联 SVG 元素的样式事实证明这是一个挑战。尽管它有潜力增强 SVG 的视觉效果，但由于 SVG 作为替换元素的性质，这种方法面临着局限性。

:before 和 :after 伪元素主要用于在元素内生成内容，导致匿名替换元素。但是，SVG 已经被替换元素，因此很难使用生成的内容注入附加内容。

提供的示例 (http://jsfiddle.net/wD56Q/) 演示了使用 :before 定义的样式的问题无法影响 SVG。这是因为 SVG 与图像一样，无法包含生成的内容。它们被认为是原子的，不会受到改变其内部内容的 CSS 属性的影响。

为了克服这一限制，人们可以探索像 CSS :outside 这样的实验性解决方案，这是一种伪元素，它将生成的内容放置在被替换元素之外而不是在里面。然而，这种方法仍在开发中，可能不会得到广泛支持。

总之，目前不支持使用 CSS :before 和 :after 直接设置内联 SVG 元素的样式。由于 SVG 是替换元素，因此它们不能包含生成的内容。其他方法，例如 CSS :outside，可能会在未来提供潜在的解决方案，但它们的采用仍不确定。

以上是CSS :before 和 :after 伪元素可以设置内联 SVG 样式吗？的详细内容。更多信息请关注PHP中文网其他相关文章！