✅ 支持的属性：

• color — 标记颜色
• content — 自定义标记内容（支持字符串、counter()、attr()等）
• font-size / font-weight / font-family / font-variant
• text-transform / white-space / letter-spacing / word-spacing
• animation / transition — 动画与过渡
• direction / unicode-bidi

❌ 不支持的属性：

• background / background-color
• display / visibility
• padding / margin
• width / height
• border / box-shadow
• position / float

简言之，::marker 仅支持字体相关属性和 content，无法设置背景、盒模型等布局属性。

li::marker {
  content: "✨";
  color: #f59e0b;
  font-size: 1.3em;
}

简单来说：::marker 更轻量、更语义化，适合快速调整列表标记；::before 更灵活，适合需要背景、定位等复杂装饰的场景。但 ::before 需要隐藏原始标记（list-style: none），而 ::marker 直接覆盖原始标记。

桌面浏览器：

• Chrome 86+ 完全支持
• Firefox 68+ 完全支持
• Safari 11.1+ 完全支持
• Edge 86+ 完全支持

移动端：

• iOS Safari 11.3+ 支持
• Android Chrome 86+ 支持
• Samsung Internet 14+ 支持

全球覆盖约 96%+ 的用户，可以放心使用。对于老旧浏览器，标记会回退到默认样式，不影响列表可读性。

li::marker {
  color: #333;
  transition: color 0.3s ease;
}
li:hover::marker {
  color: #ff6b6b;
}

这样当鼠标悬停在列表项上时，标记颜色会平滑过渡到红色。不过需要注意，不是所有属性都支持动画（如 content 的变化无法过渡），建议对 color、font-size 等可插值属性使用动画。

• decimal — 1, 2, 3...
• lower-alpha — a, b, c...
• upper-alpha — A, B, C...
• lower-roman — i, ii, iii...
• upper-roman — I, II, III...
• cjk-ideographic — 一、二、三...

配合 ::marker 可以进一步调整数字的颜色、字体、大小等样式。如果需要完全自定义格式（如"第1项"），可使用 content: "第" counter(list-item) "项";。

1. 保持简洁 — ::marker 适合快速调整标记的颜色/大小/内容，复杂装饰请用 ::before。
2. 注意对比度 — 标记颜色应与背景保持足够对比度，确保可访问性（WCAG AA 要求至少 3:1）。
3. 使用相对单位 — font-size 推荐使用 em 单位，这样标记大小随列表文字自动缩放。
4. 提供回退 — 在老浏览器中 ::marker 不生效时，标记会使用默认样式，确保列表仍然可读。
5. 避免过度使用 Emoji — Emoji 在不同操作系统上显示效果差异较大，测试后再上线。
6. 有序列表慎用自定义 content — 如果覆盖 content，确保包含 counter(list-item) 以保留计数功能。