使用::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
的编号或符号变成红色、加粗并稍大一些。
Seede AI
AI 驱动的设计工具
586 查看详情
自定义无序列表符号
虽然不能直接用 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
更灵活的视觉控制，适合现代布局中对细节的微调。
以上就是css伪元素::marker自定义列表符号的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1068651.html
微信扫一扫 
支付宝扫一扫 
