change html li tag bullet color in css

Issue

I want to change the HTML li tag bullets color with CSS, is that possible?

<html>
  <head>
    <title>change li tag bullets color</title>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </body>
</html>

Solution

I would recommend diving into the CSS to do this. Like you could do something like this:

CSS

ul {
list-style: none; /*removes the default bullets*/
}

ul li::before {
content: "(find a bullet from online and copy/paste it here)";
color: "(whatever color you want)";
font-weight: "(if you want it to be bold or italicized)";
display: inline-block; /*for spacing purposes*/
width: 1em; /*Also for spacing but you can change it to whatever*/
margin-left: -1em; /*Also for spacing*/
}

Answered By – AndreiDalton93

Answer Checked By – Terry (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.