change html li tag bullet color in css-CodePudding

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>

CodePudding user response：

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*/
}

I had this same problem a few months ago and this is how I did it. Happy coding!

CodePudding user response：

<html>
  <head>
    <title>change li tag bullets color</title>
    <style>
      ul li::before {
        content: "\2022";
        color: red;
        font-weight: bold;
        display: inline-block; 
        width: 1em;
        margin-left: -1em;
       
      }
    </style>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </body>
</html>