CSS::marker伪元素使用教程

一分耕耘，一分收获！既然打开了这篇文章《CSS伪元素::marker在列表中的使用方法》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

::marker伪元素用于自定义列表项标记样式，如改变颜色、大小和字体。可应用于ul、ol、li元素，支持color、font-size、font-weight、text-shadow等属性，示例包括将项目符号设为红色或加大编号字号。虽不支持content完全替换内容，但可结合计数器实现“第X条”效果，此时需使用::before伪元素。注意旧版浏览器兼容性及在Flex/Grid布局中的异常表现，且仅适用于默认生成标记的元素。合理使用::marker能精准控制列表外观，避免额外HTML或背景图。

在CSS中，::marker 伪元素用于控制列表项（如 li）前面的标记符号样式，比如项目符号、数字或字母。它主要应用于 ul、ol 和 li 元素，让你可以自定义这些标记的外观，而不影响列表项的内容布局。

基本用法

::marker 可以修改标记的颜色、字体、大小，甚至替换内容（有限制）。以下是一些常见应用场景：

• 改变项目符号颜色
• 调整编号大小
• 统一不同浏览器的默认样式

示例：改变无序列表项目符号颜色

li::marker {
  color: red;
}

这样所有 li 前面的圆点就会变成红色，而列表文字保持原色。

支持的CSS属性

::marker 支持的属性较少，主要包括：

• color：设置标记颜色
• content（部分支持）：不能完全自定义文本，但可用计数器配合
• font-size：调整编号或符号大小
• font-weight：改变粗细
• text-shadow：添加阴影效果

示例：加大有序列表编号字号

ol li::marker {
  font-size: 1.2em;
  color: #0055aa;
  font-weight: bold;
}

这会让有序列表的数字更大更醒目。

与计数器结合使用

虽然不能直接通过 ::marker 修改内容，但可结合CSS计数器实现高级定制。

示例：为每个列表项添加“第X条”前缀

ol {
  counter-reset: section;
}

ol li {
  counter-increment: section;
}

ol li::before {
  content: "第" counter(section) "条 ";
  color: green;
}

注意：这里用了 ::before，因为 ::marker 不支持任意 content 替换。若只改颜色和大小，仍建议用 ::marker。

注意事项

• 不支持在 ::marker 中使用 content: "" 完全替换原有标记
• 某些旧版浏览器（如IE）不支持 ::marker
• 在Flex或Grid布局中，::marker 可能表现异常，需测试
• 仅适用于具有默认标记行为的元素（如 li）

基本上就这些。用好 ::marker 能让你更精细地控制列表样式，避免用背景图或额外标签实现简单效果。

到这里，我们也就讲完了《CSS::marker伪元素使用教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！