CSS自定义列表样式技巧

CSS的`::marker`伪元素为开发者提供了一种简洁高效的方式来定制列表项（ul、ol中的li）前的标记样式，支持直接调整颜色、字号等基础视觉属性，适用于单层或多层嵌套列表的差异化设计；尽管暂不支持背景、边框或自定义content内容，但在现代浏览器中兼容性良好，是替代繁琐`::before`模拟方案的理想轻量级选择——简单易用却常被忽视的实用CSS新特性。

CSS 的 ::marker 伪元素用于自定义列表项（如 ul、ol 中的 li）前面的标记符号样式。你可以通过它改变颜色、大小、内容等，特别适用于有序列表和无序列表的个性化设计。

基本用法

使用 ::marker 可以直接选中列表项前的标记部分，比如数字、圆点或其它符号：

这段代码会让所有 li 元素前的标记变成蓝色，并稍微放大。

修改有序列表编号样式

虽然不能直接用 content 属性更改计数内容（如改成字母或自定义文本），但可以结合 counter-reset 和 counter-increment 实现更灵活控制。不过对于简单样式调整，::marker 已足够：

这样有序列表的数字会显示为红色加粗。

针对不同层级列表设置样式

在嵌套列表中，可以通过层级选择器分别设置不同层的标记样式：

外层列表编号为蓝色，内层则变为绿色。

注意事项与兼容性

::marker 支持大多数现代浏览器（Chrome、Firefox、Edge、Safari），但在一些旧版本中可能不支持。目前还不支持设置背景、边框或使用 content 插入文字内容。

不能通过 ::marker 实现如下效果：

如果需要完全自定义标记内容或添加背景，建议使用伪元素 ::before 配合 display: list-item 或手动模拟列表行为。

基本上就这些，::marker 是一个轻量且高效的列表标记样式工具，适合做颜色、字号等基础美化。不复杂但容易忽略。

终于介绍完啦！小伙伴们，这篇关于《CSS自定义列表样式技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！