Change color of svg used in ::before when :hover on text
Hi everyone, hope you're doin well! 🙂
I have the following markup (sorry, but I'm from phone):
<button class="btn--primary-iconlink">
<span>Add option</span>
</button>
And this the css:
.btn--primary-iconlink {
..other styles
&:hover {
color: var(--my-color);
}
}
.btn--primary-iconlink > span::before {
content: url(my-image.svg);
color: inherit;
fill: currentColor;
}
Basically what I want to achieve is, when I hover the button, both the text and svg should change color. But at the moment only the text does.
What I'm doing wrong? Maybe I should put the icon directly in the html instead?
6 Replies
This is a tricky one.
But I'm also sorry to tell you that it's not possible the way you are approaching it.
If you inspect the pseudo element and check what is showing, you'd see that there is no svg on the DOM, just the
::before element.
What really is happening is that the SVG is being rendered as an image.
Which means SVG controls will never affect it.
If you want to change the color, you would have to approach it like you are changing the color of an image.
That's when you would need "devices" like filter functions.
Something like:
You can use this website for more color conversion options:
https://isotropic.co/tool/hex-color-to-css-filter/
Or better still, put the SVG directly on the DOM 🤷♂️
I think put it in the DOM is the easiest way. I was just curious if it was possible.
Thanks for the help tho! 😉
You're welcome!
you could also use the svg as mask-image and use the background-color as color. in that case even gradients are possible