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

使用 CSS :before 和 :after 伪元素设置内联 SVG 样式：一个困境

虽然 :before 和 :after 等 CSS 伪元素通常用于样式化HTML 元素及其在内联 SVG 上的应用提出了独特的挑战。了解替换元素和生成内容的细微差别对于解决此问题至关重要。

内联 SVG 作为替换元素

内联 SVG 通常被视为 HTML 中的替换元素。替换元素是指用外部对象（例如图像或视频）替换文本的元素。它们显示为单个单元，不能包含任何文本节点。

这种区别很重要，因为 CSS 生成的内容（例如 :before 和 :after 伪元素创建的内容）只能应用于内联元素。内联元素是那些与周围文本一起流动的元素，它们可以包含文本节点。

生成的内容和替换的元素

CSS :before 和 :after 伪元素创建生成的内容，其中插入到选择器匹配的元素中。但是，由于内联 SVG 是替换元素，因此它们无法附加生成的内容。这是因为内容是添加在元素内部的，而替换的元素不允许嵌套内容。

替代方法

要克服此限制，可以探索替代方法：

• 带有伪元素的外部 SVG： 考虑将 SVG 作为外部文件加载并使用 CSS 来将内容插入到父元素中。
• 包装元素： 将内联 SVG 包装在包含的 div 中，并将伪元素应用于包装而不是 SVG 本身。

W3C 建议的解决方案：:outside Pseudo-Element

在 W3C 中在文档“CSS3 生成和替换的内容模块”中，引入了一个名为 :outside 的伪元素。 :outside 允许将生成的内容放置在关联的替换元素之外，这可能为内联 SVG 样式提供解决方案。但需要注意的是，此功能尚未广泛实现，并且可能并非所有浏览器都支持。

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