Html CSS :before 内联 SVG
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24026458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS :before on inline SVG
提问by danbal
Update
Thanks porneL for pointing out the relation between generated content and replaced elements.
I found this article which deals with this very topic:
http://red-team-design.com/css-generated-content-replaced-elements/
更新
感谢 porneL 指出生成内容和替换元素之间的关系。
我发现这篇文章涉及这个主题：http:
//red-team-design.com/css-generated-content-replaced-elements/
Interestingly enough, a W3C document titled "CSS3 Generated and Replaced Content Module" (from 11 years ago!) defines the pseudo-element :outside, which could offer a solution to using generated content with replaced elements, by placing the generated content outside the replaced element, instead of trying to append it inside.
有趣的是，一个名为“CSS3 生成和替换内容模块”的 W3C 文档（来自 11 年前！）定义了伪元素:outside，它可以通过将生成的内容放置在替换元素之外来提供使用带有替换元素的生成内容的解决方案，而不是尝试将其附加到内部。
Original question
原始问题
Is there a way to style an inline SVG element using the CSS :beforeand :afterpseudo-elements?
有没有办法使用 CSS:before和:after伪元素来设置内联 SVG 元素的样式？
Example: http://jsfiddle.net/wD56Q/
示例：http: //jsfiddle.net/wD56Q/
In this example, the styling defined with :beforeis not applied to the SVG (tested in Firefox 29 and Chrome 35).
Is it about the contentproperty in :before? For what I read, it tries to insert a generated content in the element.. is it what fails with SVG?
在此示例中，定义的样式:before未应用于 SVG（在 Firefox 29 和 Chrome 35 中测试）。是关于content物业:before吗？对于我读到的内容，它尝试在元素中插入生成的内容......这是 SVG 失败的原因吗？
Related documentation from MDN:
来自 MDN 的相关文档：
::before (:before)
::before creates a pseudo-element that is the first child of the element matched. Often used to add cosmetic content to an element, by using the content property. This element is inline by default.
content
The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.
::之前（：之前）
::before 创建一个伪元素，它是匹配元素的第一个子元素。通常用于通过使用 content 属性向元素添加装饰性内容。默认情况下，此元素是内联的。
内容
content CSS 属性与 ::before 和 ::after 伪元素一起使用以在元素中生成内容。使用 content 属性插入的对象是匿名替换元素。
The code in the example:
示例中的代码：
svg {
left: 50px;
position: absolute;
top: 50px;
}
svg circle {
fill: green;
}
svg:before {
border: 2px solid blue;
content: "";
height: 100px;
margin: -6px;
padding: 4px;
position: absolute;
width: 100px;
z-index: -1;
}
div {
background-color: green;
height: 100px;
left: 200px;
position: absolute;
top: 150px;
width: 100px;
}
div:before {
border: 2px solid blue;
content: "";
height: 100px;
margin: -6px;
padding: 4px;
position: absolute;
width: 100px;
z-index: -1;
}<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" />
</svg>
<div></div>采纳答案by Kornel
No, inline SVG is treated as an image, and images are replaced elementswhich are not allowed to have generated content.
不，内联 SVG 被视为图像，图像被替换为不允许生成内容的元素。
Strictly speaking, I think it's undefined. CSS 2.1just talks about "images, embedded documents and applets" in general and The HTML standarddefines it for images, but not SVG explicitly.
严格来说，我认为它是未定义的。CSS 2.1 一般只讨论“图像、嵌入文档和小程序”，HTML 标准为图像定义了它，但没有明确定义 SVG。
