有意思的是，标题为“CSS3生成和替换的内容模块”(从11年前！)的W3C文档定义了伪元素：外部，它可以提供使用生成的内容与替换元素的解决方案，将生成的内容放在替换元素，而不是试图将其附加到里面。

原来的问题

有没有办法使用CSS：before和：after伪元素来设计内联SVG元素？

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

在此示例中，使用以下定义的样式不会应用于SVG(在Firefox 29和Chrome 35中测试)。
是关于内容属性：之前吗？对于我所读的，它尝试在元素中插入生成的内容..它是否与SVG失败？

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.

示例中的代码：

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>