在 css 中更改 html li 标签项目符号颜色

Question

我想用 CSS 更改 HTML li 标签项目符号的颜色，可以吗？

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

Answer 1

我建议深入研究 CSS 来做到这一点。就像你可以做这样的事情：

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

Answer 2

<html>
  <head>
    <title>change li tag bullets color</title>
    <style>
      ul li::before {
        content: "22";
        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>

在 css 中更改 html li 标签项目符号颜色

change html li tag bullet color in css

html

css-selectors