使用::marker伪元素可自定义列表项目符号样式，支持color、font-size等属性；通过li::marker可修改颜色大小，结合list-style: none与::before可自定义无序符号，配合CSS计数器能实现高级有序列表样式，提供比list-style-type更精细的视觉控制。
使用 ::marker 伪元素可以轻松自定义有序列表（
）和无序列表（
- ）中的项目符号样式。它作用于列表项（
基本语法与支持属性
::marker 是一个伪元素，可以直接在 CSS 中为
li元素设置样式。目前支持的 CSS 属性有限，主要包括：
- color：改变标记颜色
- content（部分浏览器不支持）
- font-size、font-weight 等字体相关属性
- text-shadow
注意：不能通过 ::marker 设置背景图或复杂内容，某些属性如 width、margin 等也不支持。
修改颜色和大小
你可以调整列表符号的颜色和字体大小，使其更符合页面设计风格：
立即学习“前端免费学习笔记（深入）”；
li::marker {
color: #e74c3c;
font-size: 1.2em;
font-weight: bold;
}
这段代码会让所有
li的编号或符号变成红色、加粗并稍大一些。
自定义无序列表符号
虽然不能直接用 content 替换符号（目前多数浏览器尚未支持），但可以通过其他方式模拟。例如隐藏原有符号并用 ::before 添加自定义内容：
ul li {
list-style: none; /* 去掉默认符号 */
}
ul li::before {
content: "• ";
color: blue;
font-size: 1.3em;
margin-left: -1em;
}
这种方法适用于需要完全控制符号样式的场景。
配合计数器实现高级有序列表样式
对于
，你也可以结合 CSS 计数器和 ::marker 达到更好效果：
ol {
counter-reset: section;
}
ol li {
counter-increment: section;
}
ol li::marker {
color: purple;
font-weight: bold;
}
这样依然保留原有编号逻辑，同时美化显示样式。
基本上就这些。::marker 提供了比传统
list-style-type更灵活的视觉控制，适合现代布局中对细节的微调。
