Using pseudo-elements on SVG sub-elements
05:32 01 Nov 2016

I currently have an SVG which is a map of the UK, I've added some circle elements to the SVG which will be used as location markers.


Ideally, I was hoping to use the selector

#newcastle:hover::after { ... }

to create a pseudo-element when the user hovers over the location marker, but this doesn't appear to be working.

I've had a look online but most articles seem to be related to using SVGs in pseudo-elements and not the other way round. Is it currently possible to add pseudo-elements to SVG elements or is this not within spec? If not, are there any workarounds for achieving this effect?

html css svg