CSS :before on inline SVG

css html svg pseudo-element
danbal picture danbal · Jun 4, 2014 · Viewed 35.7k times · Source

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:

Answer

Kornel picture Kornel · Jun 4, 2014

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.

Related questions

SVG drop shadow using css3

Is it possible to set drop shadow for an svg element using css3 , something like box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; I saw some remarks on creating shadow using filter effects. Is there an …

Read More
Modify SVG fill color when being served as Background-Image

Placing the SVG output directly inline with the page code I am able to simply modify fill colors with CSS like so: polygon.mystar { fill: blue; }​ circle.mycircle { fill: green; } This works great, however I'm looking for a way to …

Read More
How can I make an svg scale with its parent container?

I want to have an inline svg element's contents scale when size is non-native. Of course I could have it as a separate file and scale it like that. index.html: <img src="foo.svg" style="width: 100%;" /> foo.…

Read More