CODEWITHSUNDEEP
csssvg
JohnG
JohnG

Reputation: 497

Reference inline SVG in CSS pseudo element?

This is a long shot... I'd like to have an svg shape appear before every h3 element, but which changes color with the class of the div it appears in. I understand that I can't do it by referencing a separate svg file through the "content" property.

Is there a way I can do it by referencing an inline svg - through the content property or otherwise?! As the actual text on the site will be written by users who can't use html, I can't simply hard-code it before every h3 element...

Thanks!

Upvotes: 2

Views: 1129

Answers (1)

RichieAHB
RichieAHB

Reputation: 2088

Unfortunately it's not possible. You need access to the svg's stroke or fill property to change the colour. Images added to the pseudo-element's content property (e.g. content: url(my.svg) is generated content and as such should just be seen as a flat image. Only the 'box' that is the pseudo-element is able to be modified through css.

Ideally, you would inject the svg inline into the DOM. However, you would still need to edit both the color property for the h3 text and either the stroke or fill property for the svg as well. As mentioned by Paulie_D in his comment, an icon font would get around this and inherit the color from the h3 tag. You can even create a custom icon font with your svg(s) with something like this.

Upvotes: 1

Related Questions