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:
http://red-team-design.com/css-generated-content-replaced-elements/

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>

回答1:

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.

来源：https://stackoverflow.com/questions/24026458/css-before-on-inline-svg

标签

css

html5

svg

pseudo-element