::marker伪元素用于自定义列表项标记样式,可调整颜色、大小等;如li::marker{color:#007acc;font-size:1.2em;}改变标记外观,适用于ul、ol中li元素的个性化设计。

CSS 的 ::marker 伪元素用于自定义列表项(如 ul、ol 中的 li)前面的标记符号样式。你可以通过它改变颜色、大小、内容等,特别适用于有序列表和无序列表的个性化设计。
基本用法
使用 ::marker 可以直接选中列表项前的标记部分,比如数字、圆点或其它符号:
li::marker {color: #007acc;
font-size: 1.2em;
}
这段代码会让所有 li 元素前的标记变成蓝色,并稍微放大。
修改有序列表编号样式
虽然不能直接用 content 属性更改计数内容(如改成字母或自定义文本),但可以结合 counter-reset 和 counter-increment 实现更灵活控制。不过对于简单样式调整,::marker 已足够:
立即学习“前端免费学习笔记(深入)”;
ol li::marker {color: red;
font-weight: bold;
}
这样有序列表的数字会显示为红色加粗。
针对不同层级列表设置样式
在嵌套列表中,可以通过层级选择器分别设置不同层的标记样式:
第三版升级内容:1、增加了分类可以自定义分类名称的颜色和粗体显示 搜索引擎优化。2、增加了商品搜索引擎优化和相关文章添加3、增加了配套商品的添加4、增加了前台商品列表按照分类、属性、品牌、价格范围进行筛选5、增加了商品的配件功能6、增加了分类的批量删除7、增加了商品扩展属性在前台的显示关闭方式8、增加了商品具体显示页商品编码和打折商品图标显示形式9、增加了最近浏览商品功能10、增加了非会员直接购物
color: blue;
}
ol ol > li::marker {
color: green;
}
外层列表编号为蓝色,内层则变为绿色。
注意事项与兼容性
::marker 支持大多数现代浏览器(Chrome、Firefox、Edge、Safari),但在一些旧版本中可能不支持。目前还不支持设置背景、边框或使用 content 插入文字内容。
不能通过 ::marker 实现如下效果:
li::marker {content: "▶"; /* 无效 */
background: yellow; /* 不生效 */
}
如果需要完全自定义标记内容或添加背景,建议使用伪元素 ::before 配合 display: list-item 或手动模拟列表行为。
基本上就这些,::marker 是一个轻量且高效的列表标记样式工具,适合做颜色、字号等基础美化。不复杂但容易忽略。









