CSS::marker自定义列表符号技巧

**CSS伪元素::marker自定义列表符号：打造个性化列表样式** 想要摆脱单调的列表符号？利用CSS伪元素`::marker`，你可以轻松自定义HTML列表（`

`和`

`)的项目符号样式，实现更精细的视觉控制。本文详细介绍了`::marker`的基本语法，包括颜色(`color`)、字体大小(`font-size`)等常用属性的设置方法，并提供实用代码示例，教你如何修改列表符号的颜色和大小，甚至通过结合`list-style: none`和`::before`伪元素，自定义无序列表符号。更进一步，我们还探讨了如何配合CSS计数器，打造高级有序列表样式，让你的列表在网页设计中脱颖而出。告别传统`list-style-type`的局限，用`::marker`赋予列表无限可能！

使用::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 的编号或符号变成红色、加粗并稍大一些。

自定义无序列表符号

虽然不能直接用 content 替换符号（目前多数浏览器尚未支持），但可以通过其他方式模拟。例如隐藏原有符号并用 ::before 添加自定义内容：

ul li {
  list-style: none; /* 去掉默认符号 */
}
<p>ul li::before {
content: "• ";
color: blue;
font-size: 1.3em;
margin-left: -1em;
}</p>

这种方法适用于需要完全控制符号样式的场景。

配合计数器实现高级有序列表样式

对于

，你也可以结合 CSS 计数器和 ::marker 达到更好效果：

ol {
  counter-reset: section;
}
<p>ol li {
counter-increment: section;
}</p><p>ol li::marker {
color: purple;
font-weight: bold;
}</p>

这样依然保留原有编号逻辑，同时美化显示样式。

基本上就这些。::marker 提供了比传统 list-style-type 更灵活的视觉控制，适合现代布局中对细节的微调。

本篇关于《CSS::marker自定义列表符号技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！