CSS在列表前加点ul/li前缀加圆点、方形点、图标

在 CSS 中，可以通过多种方式为文本或列表项添加点状符号。

CSS 设置 li 样式

示例：常见与自定义列表样式

<ul>
<li class="disc">实心圆</li>
<li class="square">方块</li>
<li class="circle">空心圆</li>
<li class="decimal">数字</li>
<li class="custom">自定义符号</li>
</ul>

<style>
li.disc { list-style-type: disc; }
li.square { list-style-type: square; }
li.circle { list-style-type: circle; }
li.decimal { list-style-type: decimal; }

/* 使用 ::marker 自定义符号 */
li.custom::marker {
content: "★";
color: gold;
font-size: 1.2em;
}
</style>

以下是几种常见方法及其示例。

Ⅰ> 使用 list-style-type 属性

<ul>
    <li><a href="#">不使用背景图纯CSS ul li前点加颜色和变色</a></li>
    <li><a href="#">不使用背景图纯CSS ul li前点加颜色和变色</a></li>
    <li><a href="#">不使用背景图纯CSS ul li前点加颜色和变色</a></li>
    <li><a href="#">不使用背景图纯CSS ul li前点加颜色和变色</a></li>
    <li><a href="#">不使用背景图纯CSS ul li前点加颜色和变色</a></li>
    <li><a href="#">不使用背景图纯CSS ul li前点加颜色和变色</a></li>
</ul>

<style>
.ul li{list-style-type: square;color: #0099ff;font-size: 16px;line-height: 30px;}
.ul li a{color: #333;font-size: 14px;}
.ul li:hover{color: #ff6900;}
.ul li:hover a{color: #ff6900}
</style>

解释
css第一行代码：

list-style-type: square;

即加前缀正方形点

css第二行：

.ul li a{color: #333;font-size: 14px;} 

是为li之内的a标签赋值的，包括颜色以及字号，但与li带的前缀点无关，只作用于a标签内的文字。

css第三行：

.ul li:hover{color: #ff6900;} 

就是触发li后li内值改变颜色，包括前缀点。

css第四行：

.ul li:hover a{color: #ff6900} 

li触发:hover后，单独为a标签内的文章变色。

Ⅱ > 使用伪元素 ::before

通过伪元素 ::before，可以自定义点的样式和位置，适用于更灵活的设计需求。

<ul class="custom-before">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>

<style>
.custom-before li::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background-color: black;
border-radius: 50%; /* 圆形 */
margin-right: 10px;
}
</style>

Ⅲ > 使用 list-style-image

可以通过自定义图像作为点状符号，适合需要特殊图标的场景。

<ul class="image-list">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>

<style>
.image-list {
list-style-image: url('dot.png'); /* 替换为实际图片路径 */
margin-left: 20px;
}
</style>

Ⅳ 自定义 marker 伪元素
通过 ::marker 伪元素，可以替换默认标记为任意字符、Emoji 或图片：

li.heart::marker {
content: "❤";
color: red;
}
li.img::marker {
content: url('icon.png');
}

这种方式比 list-style-image 更灵活，因为可以直接控制颜色、大小，并支持多种内容类型。

常用 list-style-type 值

disc： 实心圆（默认）
circle： 空心圆
square： 实心方块
decimal： 阿拉伯数字
lower-alpha / upper-alpha：小写/大写字母
none： 去掉标记不使用项目符号（常用于自定义）
color: #0099ff; 为li加的颜色，前缀点就会被变色。
font-size: li的文字大小了
line-height： 文字行高

注意事项
如果使用 list-style-type: none; 去掉标记，部分屏幕阅读器可能无法识别为列表，可用 ::before { content:"\200B"; } 修复可访问性问题。

自定义图片标记时，建议配合 padding-left 调整文本缩进，保证对齐效果。

这样，你就能让列表样式既美观又兼容性好。

对齐问题：使用 vertical-align: middle; 或 flex 布局可确保点与文字垂直居中。

兼容性：确保所用方法在目标浏览器中支持良好。

灵活性：伪元素适合复杂样式，list-style-type 更适合快速实现。