::marker是CSS伪元素,用于设置列表项前的标记样式。通过color属性可直接修改符号颜色,如li::marker { color: red; }将项目符号变为红色。支持color、content、text-shadow及部分字体属性。现代浏览器兼容良好,IE不支持。兼容性要求高时可用list-style: none结合::before自定义。

要自定义CSS中列表项的符号颜色,可以使用::marker伪元素。这个伪元素专门用于设置有序列表()和无序列表()前面的标记符号样式,包括颜色。
::marker 是什么
::marker 是一个CSS伪元素,代表列表项前的标记内容,比如数字、项目符号(•、▪、► 等)。通过它可以直接修改标记的颜色、字体等部分样式。
如何设置列表符号颜色
使用 color 属性配合 ::marker 即可更改符号颜色:
li::marker {
color: red;
}
示例HTML:
立即学习“前端免费学习笔记(深入)”;
- 第一项
- 第二项
- 第三项
加上上面的CSS后,每个列表项前的项目符号就会变成红色。
支持的样式属性
::marker 支持的CSS属性有限,目前主要支持:
- color:改变标记颜色
- content:在某些情况下可替换标记内容(但对默认列表类型有限制)
- text-shadow:添加文字阴影
-
字体相关属性:如
font-size、font-family(部分浏览器支持)
例如,同时改变颜色和大小:
li::marker {
color: blue;
font-size: 1.2em;
}
浏览器兼容性注意
::marker 在现代浏览器中支持良好(Chrome、Edge、Firefox、Safari),但旧版本可能不支持。特别是IE完全不支持。
如果需要兼容性更强的方式,可考虑用 list-style: none 配合 ::before 自定义符号:
li {
list-style: none;
}
li::before {
content: "•";
color: green;
margin-right: 8px;
font-weight: bold;
}
这种方式更灵活,能完全控制符号样式,适用于复杂需求或低版本浏览器环境。
基本上就这些,用::marker 是最直接的方法,简单有效。










