CSS :before on inline SVG

Question

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>

Kornel · Accepted Answer · 2014-06-04T00:15:42.437

58

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.

edited Jun 04 '14 at 00:15

answered Jun 03 '14 at 23:45

Kornel

97,764
37
219
309

1

Strictly speaking a ` – David Thomas Jun 03 '14 at 23:51
Thank you for the answers! The article I linked in the update references a counter example, where Chrome allows for `:after` on an `input` element. They note, however, that this is probably not an intended behavior. – danbal Jun 04 '14 at 00:54
1

From MDN: "In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are kind of external objects whose representation is independant of the CSS." - Although I never found SVG mentioned as an example, it should fall into this category. – danbal Jun 04 '14 at 01:02
25

If inline SVG is treated as images, then why can I use CSS in my HTML document to style individual parts of my inline SVG? – John Slegers Feb 06 '16 at 18:19
1

@DavidThomas could you please clarify your point? Does SVG allow setting content by CSS for certain elements? – YakovL Aug 16 '16 at 11:39
2

Is this is still true in 2022? – Paul Brannan Jun 22 '22 at 10:52

CSS :before on inline SVG

1 Answers1

Linked

Related