What is the CSS code to modify the color of an SVG ::marker?

I am looking to change the color of an SVG li::marker based on the font color. I attempted using fill="currentColor" but it did not work as expected. Any suggestions on how to resolve 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 importing the icon using a URL, but encountered the same issue:

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>

Any help is appreciated!

csssvg

Answer №1

Utilizing the CSS property content allows you to obtain a string free from SVG tags and properties. Experiment with this technique by incorporating 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Numerous sections with tabs on the webpage

I am in need of incorporating multiple tabbed sections on a single page, but unfortunately they are currently interconnected. When one tab is clicked, it impacts the others. To see this issue in action, you can visit: https://jsfiddle.net/pxpsvoc6/ This ...

javascriptjqueryhtmlcss

Tips for styling a PHP file using CSS and styling more than one element:1. Begin by creating a

I am currently attempting to style a php file using a linked stylesheet, but I am encountering some difficulties. At the moment, I have the , it will affect either the font or the border.</p> Is there a way to apply multiple styles to elements on a ...

phphtmlcss

grab the content from a text editor and insert it into a div element

Currently, I am trying to extract text from my content editable div and place it in another div (similar to the one seen on stack overflow). However, I am encountering a frustrating issue. 1. My content div seems to be lagging behind. When I type in my ed ...

javascripthtmlcss

Jumping occurs in Slick Carousel when adjusting the width of the active slide

Check out the fiddle link here: http://jsfiddle.net/br24p3Lr/ I've been attempting to perfect the animation when transitioning to a new active slide. Despite trying various approaches to resolve this issue, I seem to be stuck at the moment. The foll ...

jqueryhtmlcssanimationslick.js

Ways to align elements vertically in a container without using flexbox?

I am working with a ul element that has a height of 270px and contains 10 li elements. My goal is to have all the li elements vertically justified, meaning the top and bottom li elements should touch the container's top and bottom respectively, while ...

htmlcssflexbox

What are some strategies for maintaining a responsive layout with or without a sidebar?

I've made the decision to incorporate a sidebar on the left side of all pages across my website. This sidebar must have the ability to be either hidden or shown, without overlapping the existing content on the page. However, I'm encountering an ...

htmlcss

When two elements overlap, adjust their CSS positions to ensure responsiveness

Is there a way to adjust the position of an element when it comes into contact with another? Check out this example http://jsfiddle.net/mZYR8/1/ In the example, if .title-wrap (yellow) touches .right-wrap (orange), I want the orange element to slide unde ...

cssresponsive-design

Alternative content can be pasted into the webpage

After finding out a peculiar phenomenon related to copy and paste, I decided to share it. If you head over to the Diablo 3 website () and scroll down to the bottom of the page, you will notice: ©2012 Blizzard Entertainment, Inc. All rights reserved A ...

csscopy-pasteuppercase

Update the CAPTCHA, while also refreshing the entire registration form

JavaScript Snippet <script language="javascript" type="text/javascript"> function updateCaptcha() { $("#captchaimage").attr('src','new_captcha_image.php'); } </script> New Image Code <img src="new_ ...

javascriptphphtmlcss

Align images at the center of a division using the Bootstrap framework

I'm facing an issue with centering social network icons under a div in my login form while keeping it responsive. Can someone please assist me with this problem? Please help me!!. .row { background: #f8f9fa; margin-top: 20px; } .col { bor ...

javascripthtmlcssbootstrap-4responsive-design

In Bootstrap 4.4.1, there is a known issue where HTML may not be rendered properly after a certain section

There seems to be an issue with the placement of my buttons section in the markup. It does not appear after the DIV containing the select tag, but it does when placed before it. I have tried moving the buttons section around to troubleshoot, and it does s ...

htmlcssbootstrap-4

Bootstrap allows for word wrapping on either one or three lines

I am currently utilizing Bootstrap 3 for my website, and I have a sentence composed of three parts at a certain point on the page. For example, it might read "Bud Spencer walks with Terence Hill." where X="Bud Spencer", Y="walks with", Z="Terence Hill." T ...

htmlcsstwitter-bootstrap

The theme font fails to take effect on the paragraph

As a novice in HTML and CSS, I attempted to use the "Roboto Condensed" font from a WordPress theme for my entire site. Although I successfully implemented this custom font for a menu, I encountered difficulties when trying to apply it to paragraph elements ...

htmlcsswordpressfonts

Mastering the art of creating an authentic carbon fiber CSS background

Authentic carbon fiber consists of a series of interconnected grey fibers that resemble woven sheets in grey color. Does anyone have knowledge on how to replicate this pattern using CSS? The examples created by Lea Verou do not accurately depict true carb ...

csslinear-gradients

Is it possible to transform div containers into unique shapes?

I'm working on a design where I want to have two divs that resemble teeth, one on the top half of the page and the other on the bottom half. The concept is to make these mouth piece divs open and close as you scroll with the mouse, revealing the conte ...

javascripthtmlcssreactjs

The alignment of the timeline in HTML CSS becomes distorted once it reaches the fourth element

As a newcomer to HTML, CSS, and JS, I am currently embarking on the task of creating a personal website for a course project. One of the pages on my website showcases a timeline featuring dates and information. While I have referred to a tutorial on W3scho ...

javascripthtmlcssbootstrap-5

What is the best way to update a CSS class in React JS?

Suppose I have a CSS class called 'track-your-order' in my stylesheet. Whenever a specific event occurs, I need to modify the properties of this class and apply the updated values to the same div without toggling it. The goal is to replace the ex ...

javascriptcssreactjsstylesheetclassname

Having trouble with the filtering feature in Material UI Datagrid

I'm currently using Material UI Data Grid to display a table on my website. The grid has an additional filter for each column, but when I click on the filter, it hides behind my Bootstrap Modal. Is there a way to bring it to the front? https://i.stac ...

javascriptcssreactjsdatagridmaterial-ui

The concept of columns nested within columns

My goal is to create three new columns within the center column on my webpage. However, when I attempt to nest them, they end up stacking at the bottom of the center column instead of staying inside it. Is there a way for the center column to act as a back ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for including arrow symbols in your HTML/CSS code and ensuring that they are adaptable to various

I have been working on the following HTML layout using Bootstrap 4, but I've hit a snag with one element. Check out the design preview below: https://i.sstatic.net/V3tzT.png The HTML code is as follows: <section class="hm_sc_1"> < ...

htmlcssbootstrap-4