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?
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?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
