如何通过css ::marker自定义不同列表样式

::marker 伪元素可用于自定义列表标记的颜色、字体等样式，如设置红色加粗数字或项目符号；但不支持 content 属性，无法直接插入自定义符号或计数内容，需改用 list-style: none 配合 ::before 实现复杂效果；对于有序列表的计数定制，应使用 counter-increment 与 ::before 结合；嵌套列表中可通过层级选择器调整不同层的标记样式，提升可读性。

CSS 的 ::marker 伪元素允许我们自定义列表项前的标记符号，比如有序列表（<ol>）中的数字或无序列表（<ul>）中的圆点。通过它，可以轻松改变颜色、大小、内容等样式，而无需修改 HTML 结构。

改变默认标记的颜色和字体

使用 ::marker 可以为标记设置颜色、字体粗细等基本样式，不影响列表项其余内容。

li::marker {
  color: #e74c3c;
  font-weight: bold;
}

上面代码会让所有 <li> 元素前面的标记变成红色加粗。适用于 <ol> 的数字或 <ul> 的项目符号。

用 content 模拟自定义符号（仅限简单场景）

::marker 不支持 content 属性，不能像 ::before 那样直接插入文本或图标。但可以通过其他方式间接实现类似效果。

立即学习“前端免费学习笔记（深入）”；

若想使用自定义符号（如 ✓、★），建议改用 ::before 并配合 display: list-item 或取消默认列表样式：

ul.custom {
  list-style: none;
  padding-left: 0;
}
<p>ul.custom li {
position: relative;
padding-left: 20px;
}</p><p>ul.custom li::before {
content: "★";
color: gold;
position: absolute;
left: 0;
}</p>

这种方法更灵活，虽然不再使用 ::marker，但在需要图标或复杂符号时是标准做法。

通义万相

通义万相，一个不断进化的AI艺术创作大模型

596

查看详情

控制有序列表的计数样式

虽然 ::marker 本身不能修改计数逻辑，但结合 counter-reset 和 counter-increment 可以实现高级定制。

ol {
  counter-reset: step-counter;
  list-style: none;
}
<p>ol li {
counter-increment: step-counter;
}</p><p>ol li::marker {
content: counters(step-counter, ".") ". ";
color: blue;
}</p>

注意：上述 content 写法在 ::marker 中无效 —— 因为 ::marker 不支持 content。正确做法是使用 ::before 来显示自定义计数：

ol li::before {
  content: counter(step-counter) ". ";
  color: blue;
}

适配不同层级列表的样式

嵌套列表中，::marker 会自动继承默认行为（如数字、字母、罗马数字）。可通过选择器分别设置不同层级的样式：

/* 第一层 */
ol > li::marker {
  color: #2c3e50;
  font-size: 1.1em;
}
<p>/<em> 第二层 </em>/
ol ol > li::marker {
color: #7f8c8d;
font-variant-numeric: tabular-nums;
}</p>

这样可以让深层列表的标记更小或颜色更浅，增强可读性。

基本上就这些。::marker 适合做颜色、字体等简单修饰，复杂自定义建议搭配 list-style: none 和 ::before 实现。不复杂但容易忽略的是它对 content 的限制。

以上就是如何通过css ::marker自定义不同列表样式的详细内容，更多请关注php中文网其它相关文章！