CSS:在内联SVG之前

更新
感谢porneL指出生成的内容和替换元素之间的关系.
我发现这篇文章涉及这个主题:http:
//red-team-design.com/css-generated-content-replaced-elements/

有趣的是,一个名为"CSS3 Generated and Replaced Content Module"的W3C文档(从11年前开始!)定义了伪元素:outside,它可以通过将生成的内容放在替换元素之外,提供使用生成内容和替换元素的解决方案.而不是试图将其附加到里面.

原始问题

有没有办法使用CSS :before和:after伪元素设置内联SVG元素的样式？

示例:http://jsfiddle.net/wD56Q/

在此示例中,定义的样式:before未应用于SVG(在Firefox 29和Chrome 35中测试).它是关于content财产:before吗？对于我读到的内容,它会尝试在元素中插入生成的内容..是SVG失败了吗？

MDN的相关文档:

::之前(:之前)

::之前创建一个伪元素,它是匹配元素的第一个子元素.通常使用content属性将化妆品内容添加到元素.默认情况下,此元素是内联的.

内容

内容CSS属性与:: before和:: after伪元素一起使用,以在元素中生成内容.使用content属性插入的对象是匿名替换元素.

示例中的代码:

   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;
   }