::marker伪元素可直接美化列表项编号或符号，支持现代浏览器，适用于ol和ul的li元素，能设置颜色、字体等属性但不支持布局属性，推荐用于ol。
直接用 ::marker 伪元素就能单独美化列表项编号（或项目符号），不用额外包裹标签，也不用 JavaScript。
支持情况与基本用法
::marker 是 CSS Level 3 的标准特性，现代浏览器（Chrome 86+、Firefox 74+、Safari 15.4+、Edge 86+）均已支持。它专门作用于有序列表（
- 只适用于
元素的直接子标记（即编号本身），不能继承，也不能选中内容文本 - 可设置颜色、字体、大小、文字方向，但不支持
display、margin、padding等布局属性 - 对
常见美化方式示例
以下代码可直接应用在项目中：
ol li::marker {
color: #ff6b6b;
font-weight: bold;
font-family: "Segoe UI", system-ui;
}
/ 自定义编号后缀（如加个点或右箭头） /
ol li::marker {
content: counter(list-item) ". ";
}
/ 改为大写字母 + 冒号 /
ol.alpha li::marker {
content: counter(list-item, upper-alpha) ": ";
}
/ 换成图标（需字体支持，如使用 system emoji 或 icon font） /
ol.icon li::marker {
content: "→ ";
color: #4a90e2;
}
兼容性兜底方案
如果需要支持老版本浏览器（如 IE 或旧版 Safari），可退回到传统方法：
立即学习“前端免费学习笔记（深入）”；
- 移除原生列表样式：
list-style: none - 用
counter()配合::before手动生成编号 - 通过
position: absolute或flex控制编号位置和样式（更灵活，但略繁琐）
基本上就这些。用 ::marker 是最轻量、语义最干净的方式，只要目标环境可控，优先推荐它。
