I am trying to add an image after all external links on my site. That I can do, but I can't seem to style the svg for dark and light mode. In fact, I can't style the svg at all. It is just the default black.

The code I am using is:

a[href^="http://"]:not([href*="example.com"]):after,
a[href^="https://"]:not([href*="example.com"]):after{
display: inline-block;
width: .9em;
height: .9em;
fill: var(--main);
content: url("/images/external-link-alt-solid.svg");
border: none;
background: none;
margin-left: 0.1em;
}

I thought that the 'fill' element should change the color of the svg, but it seems to be having no effect.

A solution would be appreciated.