::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后，每个列表项前的项目符号就会变成红色。
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情 
支持的样式属性
::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 是最直接的方法，简单有效。
以上就是css伪元素::marker列表符号颜色自定义的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/998148.html
微信扫一扫 
支付宝扫一扫 
