CSS:before-on-inlinesvg
更新CSS:before-on-inlinesvg,css,html,svg,pseudo-element,Css,Html,Svg,Pseudo Element,更新 感谢Ponnel指出生成内容和替换元素之间的关系。 我发现这篇文章就是关于这个主题的： 有趣的是，一份名为“CSS3生成和替换的内容模块”（11年前）的W3C文档定义了伪元素：outside，它可以提供一种解决方案，通过将生成的内容放置在替换的元素之外，而不是尝试将其附加到内部，来使用生成的内容和替换的元素 原始问题 有没有一种方法可以使用CSS：before和：after伪元素来设置内联SVG元素的样式？ 例如： 在本例中，使用：before定义的样式未应用于SVG（在Firefox
感谢Ponnel指出生成内容和替换元素之间的关系。
我发现这篇文章就是关于这个主题的：
有趣的是，一份名为“CSS3生成和替换的内容模块”（11年前）的W3C文档定义了伪元素
：outside原始问题 有没有一种方法可以使用CSS
：before：after：before：before内容属性吗？就我所读的内容而言，它试图在元素中插入生成的内容。。这是SVG失败的原因吗
来自MDN的相关文档：
：之前（：之前）
：：before创建的伪元素是
元素匹配。通常用于通过以下方式向元素添加装饰性内容：
使用内容属性。默认情况下，此元素是内联的
内容
content CSS属性与：：before和：：after一起使用
伪元素生成元素中的内容。插入的对象
使用content属性的是匿名替换的元素
示例中的代码：
svg{
左：50px；
位置：绝对位置；
顶部：50px；
}
svg圆{
填充：绿色；
}
svg：以前{
边框：2件纯蓝；
内容：“；
高度：100px；
利润率：-6px；
填充：4px；
位置：绝对位置；
宽度：100px；
z指数：-1；
}
div{
背景颜色：绿色；
高度：100px；
左：200px；
位置：绝对位置；
顶部：150px；
宽度：100px；
}
部门：以前{
边框：2件纯蓝；
内容：“；
高度：100px；
利润率：-6px；
填充：4px；
位置：绝对位置；
宽度：100px；
z指数：-1；
}
否，内联SVG被视为图像，图像被替换为不允许生成内容的元素
严格地说，我认为它没有定义。一般来说，只讨论“图像、嵌入式文档和小程序”，并为图像定义它，而不是明确地定义SVG。严格来说，
元素可以包含生成的内容；不能输入的是输入
元素（包括type=“button”
）的元素。谢谢您的回答！我在更新中链接的文章引用了一个反例，其中Chrome允许输入
元素上的：after
。然而，他们注意到，这可能不是预期的行为。来自MDN：“在CSS中，被替换的元素是一种表示超出CSS范围的元素。这些是一种外部对象，其表示与CSS无关。”-尽管我从未发现SVG作为示例提到，它应该属于这一类。如果内联SVG被视为图像，那么为什么我可以在HTML文档中使用CSS来为内联SVG的各个部分设置样式？@DavidThomas您能澄清一下您的观点吗？SVG是否允许通过CSS为某些元素设置内容？