::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 支持的属性较少，主要包括：
Yes!SUN企业网站系统 3.5 Build 20100303
下载
Yes!Sun基于PHP+MYSQL技术，体积小巧、应用灵活、功能强大，是一款为企业网站量身打造的WEB系统。其创新的设计理念，为企业网的开发设计及使用带来了全新的体验：支持前沿技术：动态缓存、伪静态、静态生成、友好URL、SEO设置等提升网站性能、用户体验、搜索引擎友好度的技术均为Yes!Sun所支持。易于二次开发：采用独创的平台化理念，按需定制项目中的各种元素，如：产品属性、产品相册、新闻列表
- 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
）
