更新 感謝porneL指出了生成內容和替換元素之間的關系。 我找到了這篇文章，討論了這個話題:

有趣的是，一份名為& quotCSS3生成并替換了內容模塊& quot(來自11年前！)定義了偽元素:outside，通過將生成的內容放在被替換的元素之外，而不是試圖將它附加到元素內部，它可以提供一個將生成的內容與被替換的元素一起使用的解決方案。

原始問題

有沒有辦法使用CSS :before和:after偽元素來設計內聯SVG元素的樣式？

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

在這個例子中，用:before定義的樣式沒有應用于SVG(在Firefox 29和Chrome 35中測試)。 是關于:之前的內容屬性嗎？據我所知，它試圖在元素中插入生成的內容..這是SVG失敗的原因嗎？

來自MDN的相關文檔:

*之前(:之前)

* before創建一個偽元素，它是 元素匹配。通常用于向元素添加裝飾性內容，通過 使用內容屬性。默認情況下，此元素是內聯的。

內容

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

<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只是籠統地談論“圖像、嵌入式文檔和小程序”，HTML標準為圖像定義了它，但沒有明確地定義SVG。