HTML+CSS修改li前小圆点的样式or颜色

修改样式

有两种方法比较方便的方法

有参考样式的图片情况：

可以使用图像处理软件将图片导出来使用

list-style-image:url("");

即可修改li前原点样式
需要调位置的话框选图的时候可以在原图周围框选的稍微多一点

将原有的小圆点删除后再添加

首先使用

list-style: none;

将原有的小圆点删除，然后使用CSS伪元素li：before 添加

修改颜色

如果只是修改颜色的话，可以使用li内的color属性直接修改
再给字体加一个标签，将字体改回原来的颜色即可

代码

下面是测试代码：

HTML代码块：

<ul class="first">
    <li>这是一种修改li前小圆点方式</li>
    <li>这是一种修改li前小圆点方式</li>
</ul>
<ul class="second">
    <li>这是另一种修改li前小圆点方式</li>
    <li>这是另一种修改li前小圆点方式</li>
</ul>
<ul class="third">
    <li><span> 这是修改li前小圆点颜色</span></li>
    <li><span> 这是修改li前小圆点颜色</span></li>
</ul>

CSS代码块：

.first li{list-style-image: url("./images/li前小圆点.png");}
.second li{list-style: none;}
.second li:before{
    content: url("./images/li前小圆点.png");
}
.third li{color: red;}
.third li span{color: black}

li：before内可以有更多样式，具体可以网上查找

以下是效果图：

欢迎补充