Styling external SVG used in '::before' content

Question

HTML - somewhere inside nav tag:

<li><a id='readme-link' class='clicked'>README.md</a></li>

CSS

nav a::before {
    content: url('icons/file-text.svg');
    opacity: 0.87;
    margin-right: 0.5ch;
    position: relative;
    top: 0.5ch;
}

I want to change the color of the link and the fill color of the SVG file when the link is clicked. I'm doing it by adding clicked class to the a tag.

I'm having a hard time changing the fill color of the SVG. Following this, my SVG file looks like this:

<?xml-stylesheet type="text/css" href="../style.css" ?>
<svg id='file-text-svg' height="16" width="14" xmlns="http://www.w3.org/2000/svg">
    <path d="M6 5H2v-1h4v1zM2 8h7v-1H2v1z m0 2h7v-1H2v1z m0 2h7v-1H2v1z m10-7.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v12h10V5z" />
</svg>

And in the CSS I have

path {
    fill: FireBrick;
}

I tried to change path to svg and couple other stuff but that still doesn't work!

No. you can't style an SVG like that, it's an SVG image in that setting not an SVG element so the inner parts are not accessible with CSS, or pretty much anything TBH. — Paulie_D, May 03 '16 at 16:07

G-Cyrillus · Answer 1 · 2016-05-03T16:34:35.157

2

You cannot since the svg is not part of your document, it is another document elsewhere that your style cannot access.

You need to look at other technics such mix-blend-mode or filter:

a::before, a::after {
    content: url(https://upload.wikimedia.org/wikipedia/commons/4/44/Icon_External_Link.svg);
    opacity: 0.87;
    margin-right: 0.5ch;
    position: relative;
    top: 0.5ch;
   }

/* change color of SVG via filter */
a::before {
     -webkit-filter:hue-rotate(170deg);
          filter:hue-rotate(170deg);
}

/* mix-blend-mode */
a[href] {
  background:linear-gradient(to right,red , red) no-repeat bottom left ;
  background-size:12px 12px;
  }
a[href]::before {
  /* reset previous filter */
  -webkit-filter:hue-rotate(0deg);
          filter:hue-rotate(0deg);
  box-shadow:inset 0 0 0 120px white;
  mix-blend-mode:screen;

<a id='readme-link' class='clicked'>::before hue-rotate</a>   <br/>
<a href >::before mix-blend-mode</a>

edited May 03 '16 at 16:34

answered May 03 '16 at 16:25

G-Cyrillus

101,410
14
105
129

Thanks! I think the best thing for me is to create a new SVG with the desired color and swap between to two. But, I still don't understand why can't I style my SVG if I added a reference to an external css file **inside** the SVG code. – galah92 May 03 '16 at 16:48
@Galdalf even then, it won't react to hover, unless you use an object tag or a frame :(. My preference would go for the filter http://codepen.io/gc-nomade/pen/qZQGRQ , but to swap from 2 SVG image is the most solid way. you can even blend them a bit using 2 pseudos on top each other and switching opacity values :) – G-Cyrillus May 03 '16 at 16:56
Thanks! I managed to do it with two SVG files, because I add a class to the desired link so it's kinda easy that way. BUT I still don't understand why can't I do what is mentioned in the link I referred to in the original question. What is the difference? – galah92 May 05 '16 at 07:19

Styling external SVG used in '::before' content

1 Answers1