HTML+CSS修改li前⼩圆点的样式or颜⾊HTML+CSS修改li前⼩圆点的样式or颜⾊
修改样式
有两种⽅法⽐较⽅便的⽅法
有参考样式的图⽚情况：
可以使⽤图像处理软件将图⽚导出来使⽤
list-style-image:url("");
即可修改li前原点样式
需要调位置的话框选图的时候可以在原图周围框选的稍微多⼀点
将原有的⼩圆点删除后再添加
⾸先使⽤
list-style: none;
将原有的⼩圆点删除，然后使⽤CSS伪元素li：before 添加
修改颜⾊
如果只是修改颜⾊的话，可以使⽤li内的color属性直接修改
再给字体加⼀个标签，将字体改回原来的颜⾊即可
代码
下⾯是测试代码：
HTML代码块：
html ul标签<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内可以有更多样式，具体可以⽹上查
以下是效果图：
欢迎补充

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。