CSS：之前的内联SVG

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

有意思的是，标题为“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>

解决方法

不，内联SVG被视为图像，图像被替换为不允许生成内容的元素。

严格来说，我认为这是不明确的。 CSS 2.1只是谈论“图像，嵌入式文档和小程序”一般，The HTML standard定义它的图像，而不是SVG明确。

原文地址：https://www.jb51.cc/css/219325.html