::marker是CSS伪元素,用于设置列表项前的标记样式。通过color属性可直接修改符号颜色,如li::marker { color: red; }将项目符号变为红色。支持color、content、text-shadow及部分字体属性。现代浏览器兼容良好,IE不支持。兼容性要求高时可用list-style: none结合::before自定义。
要自定义CSS中列表项的符号颜色,可以使用::marker
伪元素。这个伪元素专门用于设置有序列表(<ol>
)和无序列表(<ul>
)前面的标记符号样式,包括颜色。
::marker
是一个CSS伪元素,代表列表项前的标记内容,比如数字、项目符号(•、▪、► 等)。通过它可以直接修改标记的颜色、字体等部分样式。
使用 color
属性配合 ::marker
即可更改符号颜色:
li::marker { color: red; }
示例HTML:
立即学习“前端免费学习笔记(深入)”;
<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul>
加上上面的CSS后,每个列表项前的项目符号就会变成红色。
::marker
支持的CSS属性有限,目前主要支持:
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
是最直接的方法,简单有效。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号