CODEWITHSUNDEEP
csssvg
JulSeb42
JulSeb42

Reputation: 307

How to change ::marker SVG color in CSS?

I have an SVG li::marker, and I would like to change the color depending on the font color. I was thinking to use it like this, where I put fill="currentColor" but this is not working. How could I fix this?

li::marker {
    content: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.942666 7.60933L4.74733 3.80467L0.942666 0L0 0.942666L2.862 3.80467L0 6.66667L0.942666 7.60933Z' fill='currentColor'/%3E%3C/svg%3E%0A");
}

I also tried to import the icon with an URL, but same:

li::marker {
    content: url(/assets/images/icons/list-marker.svg);
}

<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0.942666 7.60933L4.74733 3.80467L0.942666 0L0 0.942666L2.862 3.80467L0 6.66667L0.942666 7.60933Z" fill="currentColor"/>
</svg>

Thanks!

Upvotes: 3

Views: 1335

Answers (1)

Anton
Anton

Reputation: 8508

By using the property content in css, you get a string without SVG tags and properties. Try this approach with additional color classes.

body {
  color: aliceblue;
  background-color: hsl(201, 27%, 10%);
}

li {
  padding-inline-start: 0.5rem;
  margin-block: 0.2rem;
}
li.pink strong {
  color: #ea4c89;
}
li.orange strong {
  color: #f49d37;
}
li.purple strong {
  color: #a16cf4;
}

li::marker {
  /* Replace fill attribute color # => %23, example: #fff => %23fff */

  --pink-fill: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.942666 7.60933L4.74733 3.80467L0.942666 0L0 0.942666L2.862 3.80467L0 6.66667L0.942666 7.60933Z' fill='%23ea4c89'/%3E%3C/svg%3E%0A");
  --orange-fill: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.942666 7.60933L4.74733 3.80467L0.942666 0L0 0.942666L2.862 3.80467L0 6.66667L0.942666 7.60933Z' fill='%23F49D37'/%3E%3C/svg%3E%0A");
  --purple-fill: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.942666 7.60933L4.74733 3.80467L0.942666 0L0 0.942666L2.862 3.80467L0 6.66667L0.942666 7.60933Z' fill='%23A16CF4'/%3E%3C/svg%3E%0A");
}
li.pink::marker {
  content: var(--pink-fill);
}
li.orange::marker {
  content: var(--orange-fill);
}
li.purple::marker {
  content: var(--purple-fill);
}
<ul>
  <li class="pink"><strong>Color: </strong>Frandango Pink</li>
  <li class="orange"><strong>Color: </strong>Carrot Orange</li>
  <li class="purple"><strong>Color: </strong>Medium Purple</li>
</ul>

Upvotes: 1

Related Questions