如何在CSS中使用::marker修改列表符号样式并实现自定义列表标记

在网页排版中，列表是非常常见的元素。默认情况下，无序列表使用圆点，有序列表使用数字，但这些样式往往比较单一。CSS的::marker伪元素允许我们直接针对列表项的标记盒子设置样式，从而实现自定义列表标记，而不需要借助额外的HTML结构或背景图。

什么是::marker伪元素

::marker是CSS伪元素，它匹配列表项（如<li>）生成的标记盒子，也就是显示在内容前面的符号或编号。只有display类型为list-item的元素才能使用它。通过::marker，我们可以改变标记的颜色、字体大小、字体本身以及内容。

可使用的常见属性

并不是所有CSS属性都能用在::marker上，目前主要支持以下类型：

• color：设置标记颜色
• font-size、font-family、font-weight：控制标记文字样式
• content：替换标记内容，仅对部分列表生效
• text-combine-upright、unicode-bidi等少量排版属性

基础使用示例

下面演示如何修改无序列表标记的颜色和大小：

ul li::marker {
  color: #e91e63;
  font-size: 1.2em;
}

对于有序列表，我们还能通过content改变编号表现形式：

ol li::marker {
  content: counter(list-item) ")";
  color: #3f51b5;
  font-weight: bold;
}

实现自定义符号

如果想用特定字符或emoji之外的纯文本符号做标记，可以用content直接赋值。注意content里的字符串需要使用转义或普通字符：

ul.custom li::marker {
  content: "★ ";
  color: #ff9800;
}

对应的HTML结构如下：

<ul class="custom">
  <li>第一项</li>
  <li>第二项</li>
</ul>

兼容性与注意点

现代浏览器基本都支持::marker，但在旧版浏览器中可能需要降级处理。另外，content属性在无序列表上某些浏览器只允许设置为特定值，若需完全自定义图形，仍可结合background或伪元素模拟。使用::marker时，记得它只影响标记盒子，不影响<li>主体内容的布局。

小结

通过CSS的::marker伪元素，开发者可以用很少的代码完成列表符号的自定义，提升样式可控性。掌握它能让我们在不用改动HTML结构的前提下，快速统一站点内的列表视觉风格。

CSS::marker自定义列表标记修改时间：2026-07-30 00:24:20