CSS :before on inline SVG

Update
Thanks porneL for pointing out the relation between generated content and replaced elements.
I found this article which deals with this very topic:

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.

---

Original question

Is there a way to style an inline SVG element using the CSS :before and :after pseudo-elements?

Example: http://jsfiddle.net/wD56Q/

In this example, the styling defined with :before is not applied to the SVG (tested in Firefox 29 and Chrome 35). Is it about the content property in :before? For what I read, it tries to insert a generated content in the element.. is it what fails with SVG?

Related documentation from 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.

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>

No, inline SVG is treated as an image, and images are replaced elements which are not allowed to have generated content.

Strictly speaking, I think it's undefined. CSS 2.1 just talks about "images, embedded documents and applets" in general and The HTML standard defines it for images, but not SVG explicitly.