How to style SVG node with :before pseudo element

Question

I'm trying to style react-d3-map's marker image. There is no way to change its image (except for the change of library's code), so i'm trying to hide it and use :before pseudo element.

 <image class="icon-map-marker marker"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        xlink:href="data:image/png;base64,[...]==" <!-- hardcoded in library -->
        x="141.98888888888882" y="163.8247013673872"
        height="25" width="25"
 </image>

but all the css definitions in chrome's developer's console are grayed out and of course not working - similar in FF

[class*="icon-"]:before {
  content: "0";
  min-width: 1em;
  text-align: left;
  display: inline-block;
  font-size: 18px;
}
.icon-map-marker:before {
    content: "\107F";
}

This CSS works great for HTML element. Is it all possible to create pseudo element for SVG node? Maybe some other way to change this image?

Update: I don't want to set :before on SVG element. But on image node inside SVG hierarchy.

@Mr_Green, I think it's the opposite here, OP wants to set `before` pseudo element **on** a SVGElement. and it's not possible though ;-) — Kaiido, Sep 19 '16 at 09:23

score 1 · Answer 1 · edited May 23 '17 at 12:32

1

Pseudoelements can't be applied on <image> Tags. the specs are saying this:

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

Also see this answer

edited May 23 '17 at 12:32

Community

1
1

answered Sep 19 '16 at 10:36

Adrian Lambertz

858
6
11

1

`` is not IMG, But any svg element is considered a replaced element. – Kaiido Sep 19 '16 at 11:35
Never said that = . the note sais "such as IMG" ... – Adrian Lambertz Sep 19 '16 at 11:40
1

But nothing in your quote says that it applies to `` nor svg elements in general. – Kaiido Sep 19 '16 at 11:56

How to style SVG node with :before pseudo element

1 Answers1