CSS伪元素::marker颜色自定义技巧

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《CSS伪元素::marker自定义颜色方法》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

::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：

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

加上上面的CSS后，每个列表项前的项目符号就会变成红色。

支持的样式属性

::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颜色自定义技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！