Change color/fill of a SVG path when used in the content of a ::before pseudo-element

Question

I have to display an icon as an SVG path in the content of the ::before pseudo element of a td.

According to many resources I found online, this alone is pretty straight-forward and can be achieved by the following code:

#mytd::before {
  content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M350.85 129c25.97 4.67 47.27 18.67 63.92 42 14.65 20.67 24.64 46.67 29.96 78 4.67 28.67 4.32 57.33-1 86-7.99 47.33-23.97 87-47.94 119-28.64 38.67-64.59 58-107.87 58-10.66 0-22.3-3.33-34.96-10-8.66-5.33-18.31-8-28.97-8s-20.3 2.67-28.97 8c-12.66 6.67-24.3 10-34.96 10-43.28 0-79.23-19.33-107.87-58-23.97-32-39.95-71.67-47.94-119-5.32-28.67-5.67-57.33-1-86 5.32-31.33 15.31-57.33 29.96-78 16.65-23.33 37.95-37.33 63.92-42 15.98-2.67 37.95-.33 65.92 7 23.97 6.67 44.28 14.67 60.93 24 16.65-9.33 36.96-17.33 60.93-24 27.98-7.33 49.96-9.67 65.94-7zm-54.94-41c-9.32 8.67-21.65 15-36.96 19-10.66 3.33-22.3 5-34.96 5l-14.98-1c-1.33-9.33-1.33-20 0-32 2.67-24 10.32-42.33 22.97-55 9.32-8.67 21.65-15 36.96-19 10.66-3.33 22.3-5 34.96-5l14.98 1 1 15c0 12.67-1.67 24.33-4.99 35-3.99 15.33-10.31 27.67-18.98 37z'/></svg>");
  display: inline-block;
  width: 18px;
  margin-left: 2px;
  margin-right: 3px;
}

The problem is that I need to also change the default black color to something else, ideally to a CSS variable (var(--wd-link-color)), but if that's not possible, a simple #hex would be acceptable also. However, no matter what I tried, it doesn't seem to be working... Any help please? I created this little fiddle for you. TIA.

don't know if it's *you* trying to reopen the question but the answer you accepted is the first answer in the duplicate so you confirm the duplicate — Temani Afif, Aug 01 '22 at 21:32
@TemaniAfif yes, I upvoted in favor of re-opening it... I checked the supposed topic that mine is a duplicate of, but mine is a combination of what you mention and other topics together. There is no single topic that's an exact duplicate of my issue. For example, in my case the SVG path is inserted as a stand-alone — Faye D., Aug 01 '22 at 22:35
@TemaniAfif you are right that practically it doesn't make any difference, but not everyone is a CSS expert (neither am I of course); there may be a person that needs to be spoon-fed in matching every aspect of their case to relate it to another case... So, having said that, I still believe my case is unique and doesn't have a complete duplicate... Anyway, I don't have a problem in it getting closed. But I won't retract my vote either... — Faye D., Aug 01 '22 at 22:58
@TemaniAfif and finally, if you had put the effort you put in proving me wrong to helping others, this place would be much better... In a world of people like you, try to be like Zohini and Fabrizio Calderan... — Faye D., Aug 01 '22 at 23:02
I am not putting effort to prove you wrong but to explain you the concept of duplicate that you are misunderstanding. Such concept is more helpful to people than repeating the same answer again and again. But of course, being rude with others is the easiest solution for people who disagree with the rules. I don't need to be like Zohini or Fabrizio because I am doing much more that both of them trying to help people here. — Temani Afif, Aug 01 '22 at 23:10

Rainbow · Accepted Answer · 2022-08-01T16:06:09.490

You could use a mask.

div::before {
  display: inline-block;
  width: 18px;
  height: 18px;
  content: '';
  background: var(--c);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg  xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path  d='M350.85 129c25.97 4.67 47.27 18.67 63.92 42 14.65 20.67 24.64 46.67 29.96 78 4.67 28.67 4.32 57.33-1 86-7.99 47.33-23.97 87-47.94 119-28.64 38.67-64.59 58-107.87 58-10.66 0-22.3-3.33-34.96-10-8.66-5.33-18.31-8-28.97-8s-20.3 2.67-28.97 8c-12.66 6.67-24.3 10-34.96 10-43.28 0-79.23-19.33-107.87-58-23.97-32-39.95-71.67-47.94-119-5.32-28.67-5.67-57.33-1-86 5.32-31.33 15.31-57.33 29.96-78 16.65-23.33 37.95-37.33 63.92-42 15.98-2.67 37.95-.33 65.92 7 23.97 6.67 44.28 14.67 60.93 24 16.65-9.33 36.96-17.33 60.93-24 27.98-7.33 49.96-9.67 65.94-7zm-54.94-41c-9.32 8.67-21.65 15-36.96 19-10.66 3.33-22.3 5-34.96 5l-14.98-1c-1.33-9.33-1.33-20 0-32 2.67-24 10.32-42.33 22.97-55 9.32-8.67 21.65-15 36.96-19 10.66-3.33 22.3-5 34.96-5l14.98 1 1 15c0 12.67-1.67 24.33-4.99 35-3.99 15.33-10.31 27.67-18.98 37z'/></svg>") center no-repeat;
}

<div style="--c:red;"></div>
<div style="--c:orange;"></div>
<div style="--c:yellow;"></div>
<div style="--c:green;"></div>
<div style="--c:blue;"></div>
<div style="--c:indigo;"></div>
<div style="--c:violet;"></div>

Fabrizio Calderan · Answer 2 · 2022-08-01T15:31:04.780

If you include your SVG as a data URI background into the style, you need to hardcode the color of the fill (or stroke) property by encoding the # symbol into %23 so if your color was #c642b7 your svg would be

<path fill='%23c642b7' d='M350.85 129c25.97...

div::before {
  display: inline-block;
  inline-size: 1rem;
  margin-inline: 0 .5rem;
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M350.85 129c25.97 4.67 47.27 18.67 63.92 42 14.65 20.67 24.64 46.67 29.96 78 4.67 28.67 4.32 57.33-1 86-7.99 47.33-23.97 87-47.94 119-28.64 38.67-64.59 58-107.87 58-10.66 0-22.3-3.33-34.96-10-8.66-5.33-18.31-8-28.97-8s-20.3 2.67-28.97 8c-12.66 6.67-24.3 10-34.96 10-43.28 0-79.23-19.33-107.87-58-23.97-32-39.95-71.67-47.94-119-5.32-28.67-5.67-57.33-1-86 5.32-31.33 15.31-57.33 29.96-78 16.65-23.33 37.95-37.33 63.92-42 15.98-2.67 37.95-.33 65.92 7 23.97 6.67 44.28 14.67 60.93 24 16.65-9.33 36.96-17.33 60.93-24 27.98-7.33 49.96-9.67 65.94-7zm-54.94-41c-9.32 8.67-21.65 15-36.96 19-10.66 3.33-22.3 5-34.96 5l-14.98-1c-1.33-9.33-1.33-20 0-32 2.67-24 10.32-42.33 22.97-55 9.32-8.67 21.65-15 36.96-19 10.66-3.33 22.3-5 34.96-5l14.98 1 1 15c0 12.67-1.67 24.33-4.99 35-3.99 15.33-10.31 27.67-18.98 37z' fill='%23c642b7'/></svg>");

}

<div>Icon</div>

Indeed this worked like a charm, thanks a lot. I wonder though, isn't there absolutely no way to set the color as a variable? Maybe with another CSS rule. I tried many combinations like `#mytd::before svg { fill: var(--wd-link-color) }` or `#mytd::before svg path { fill: var(--wd-link-color) }` but nothing worked... — Faye D., Aug 01 '22 at 15:47

Change color/fill of a SVG path when used in the content of a ::before pseudo-element

2 Answers2