::marker 是修改列表标记最干净的方式，仅作用于标记本身，支持 content、color、font 相关属性，不支持 margin/padding/background；需配合 counter-increment 使用，注意浏览器兼容性与字体支持。
用 ::marker 改符号本身，不是覆盖整个 li
直接改 ::marker 是最干净的方式——它只作用于列表项前的标记（比如圆点、数字、字母），不干扰 li 内容的布局和样式。很多人误以为要靠 list-style: none + before 模拟，其实大可不必，除非你需要极老浏览器兼容（::marker 在 Chrome 86+/Firefox 80+/Safari 15.4+ 才稳定支持）。
关键点：::marker 只接受有限的 CSS 属性： content、color、font 相关（font-family、font-weight 等）、text-align（仅对某些 list-style-type 有效），不支持 margin、padding、background 或 transform。
-
content可以用字符串、attr()或counter()，例如content: "→ "或content: counter(list-item) ". " - 若想用图标字体（如 Font Awesome），得确保
font-family正确加载且字符存在，例如content: "★"; font-family: "Font Awesome 5 Free"; - 别给
::marker设display: block或inline-flex—— 它天生是inline，强行改会失效
数字/字母序号想加括号或前后缀？用 counter() + content
默认的 decimal 或 lower-alpha 无法直接加括号，但 ::marker 的 content 可以调用计数器并拼接：
ol {
list-style: none;
}
ol li {
counter-increment: item;
}
ol li::marker {
content: counter(item) ". ";
color: #2563eb;
font-weight: 600;
}
这样就能自由控制格式，比如 content: "(" counter(item, upper-roman) ") " 输出 (I) 。注意：counter() 第二个参数必须和 list-style-type 值一致（如 upper-roman），否则可能回退为十进制。
立即学习“前端免费学习笔记（深入）”；
- 不推荐在
content里写死数字（如"1. "），会失去自动编号能力 - 如果
ol嵌套，要用counter(item, decimal)显式指定层级，避免继承外层计数器 -
counter-reset要设在父容器上（如ol），不能只设在li上
图标、emoji、自定义字符做标记？优先用 content 直接赋值
比用图片或伪元素模拟更轻量，也避免定位偏移问题。只要字体支持，emoji 和 Unicode 字符都能直接用：
ul li::marker {
content: "? ";
color: #7c3aed;
font-size: 1.1em;
}
常见可用符号： "• "、"» "、"✦ "、"? "、"? "。注意结尾留空格，否则和文字粘连；若需对齐，用 vertical-align: middle 微调（::marker 支持该属性）。
- 避免用宽字符（如中文标点）做
content，可能导致行高异常或换行错位 - 如果符号显示为方块，检查当前
font-family是否包含该字符，或显式设置支持 emoji 的字体（如font-family: system-ui, "Segoe UI Emoji"） - 不要指望
::marker渲染 SVG 或背景图——它不支持background-image
为什么 ::marker 样式没生效？先查这三件事
常见静默失败原因不是语法错，而是被其他规则压制或前提不满足：
- 父元素用了
list-style: none，但没配counter-increment——::marker依赖计数器存在，list-style: none会停用默认计数器，必须手动补上 - 写了
li::marker { content: "x" }，但li没在ol或ul内——::marker只对「语义列表项」有效，脱离上下文就无效 - 在 Safari 15.3 或旧版 Firefox 中测试，发现不渲染——确认浏览器版本，必要时降级用
li::before+content回退方案
真正麻烦的是混合场景：比如需要带背景色的圆点，或带边框的数字。这时候 ::marker 束手无策，只能放弃它，改用 li::before 定位模拟——但那就不是“修改符号”，而是重做了。
