Does the :before pseudo-class affect tspan in SVG?

Question

Can I use a :before CSS pseudo-element with an SVG tspan element?

Specifically, I am trying to make font-awesome work in SVG without having to resort to re-encoding all the chars as explained here, and inestead by just adding the right class to the element.

In other words, I'd like to be able to do this:

<tspan
   class="fa fa-meetup"
   x="12.70"
   y="17"></tspan></text>

and see it work.

I do not believe that SVG supports pseudo-elements as yet. - https://www.w3.org/TR/SVG2/styling.html — Paulie_D, Aug 16 '19 at 10:07
check this may be helpful -- https://stackoverflow.com/questions/24026458/css-before-on-inline-svg — Sumit Patel, Aug 16 '19 at 10:41

benjamyan · Accepted Answer · 2019-08-16T14:41:50.987

It's possible to add the SVG as a background to the psuedo class, avoiding any clashing with SVG as per this post:

Is there a way to use SVG as content in a pseudo element :before or :after

So instead of trying to apply the FontAwesome class as a selector on the element, you can set the i element to wherever you need it, and compensate for the background SVG that is loaded in.

And to answer your comment - you would need to encode the FA into new classes to make it work the way you're asking, since FontAwesome uses i by default. It would work like this:

.your-class {
   content: "/f121";
}

Does the :before pseudo-class affect tspan in SVG?

1 Answers1