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

使用 CSS 设计内联 SVG :before 和 :after 伪元素

简介

CSS :before 和 :after 伪元素通常用于增强 HTML具有装饰性或功能性内容的元素。然而，当涉及到内联 SVG 元素时，应用这些伪元素可能会遇到挑战。本文探讨了为什么它具有挑战性并提供了一个潜在的解决方案。

SVG 作为替换内容

内联 SVG 元素被视为替换内容，这意味着它们替换了他们所指的元素。这种行为是所有类似图像的元素（包括 SVG）所固有的。因此，在替换的元素中不允许生成内容，例如 :before 和 :after 创建的内容。

为什么 :before 和 :after 使用 SVG 失败

MDN 文档指出使用 :before 和 :after 创建的元素是“匿名替换元素”。由于替换的内容不能包含生成的内容，这解释了为什么将 :before 和 :after 应用于内联 SVG 无效。

潜在解决方案 - :outside 伪元素

An标题为“CSS3 生成和替换的内容模块”的 CSS 草稿文档中提出了有趣的解决方案。本文档引入了一个新的伪元素 :outside，它将生成的内容放置在替换元素之外。通过利用 :outside，可以克服 :before 和 :after 与内联 SVG 一起使用时的限制。

结论

而使用 CSS 时：内联 SVG 上的 before 和 :after 伪元素通常不受支持，:outside 伪元素提供了一个潜在的解决方案，可以将生成的内容放置在SVG 元素。开发人员在设计 CSS 样式时应注意内联元素和替换元素之间的差异。

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