自定义列表符号需先设 list-style: none 并重置缩进；::marker 轻量语义强但属性受限，仅支持 color、font-size 等；::before 更灵活可插图标/SVG/实现交互，需手动定位与留白。
用伪元素自定义列表项目符号，核心是先清除默认样式，再用 ::before 或 ::marker 插入新内容。两种方式适用场景不同：::marker 更轻量语义强但限制多；::before 更自由兼容好但需手动对齐。
清除默认符号是前提
无论选哪种伪元素，第一步都是关掉浏览器自带的标记：
- 对
<ul>或<ol>设置list-style: none - 同时重置缩进，比如加
padding-left: 0和margin-left: 0 - 确保
<li>的display是list-item（避免被父容器如 flex/grid 覆盖）
用 ::marker 控制颜色与大小（现代推荐）
适合只需调色、缩放、换字体的简洁需求，语义保留完整，自动对齐基线：
- 写法示例：
li::marker { color: #2563eb; font-size: 1.1em; } - 仅支持有限属性：必用
color，font-size在 Chrome 110+/Firefox 115+/Safari 16.4+ 才稳定 - 不能设背景、边距、定位；
content只能配合计数器或纯文本，不支持url()或 emoji 直接替换圆点 - 若没生效，检查 DevTools 中该规则是否被划掉——可能是浏览器不支持，或父级用了
list-style: none导致 marker 未生成
用 ::before 实现图标/图片/交互效果
需要 SVG、emoji、悬停变色、响应式尺寸时，::before 是更可靠的选择：
立即学习“前端免费学习笔记（深入）”；
- 给
li加position: relative，再写li::before - 插入内容：
content: "✓";、content: url("check.svg");或content: ""+background-image - 控制位置：用
position: absolute+left/top定位，配合transform: translateY(-50%)垂直居中 - 留出文字空间：在
li上加padding-left（值 ≥ 图标宽度 + 间距），避免文字覆盖
兼容性兜底策略
面向旧版 Safari（
- 放弃 ::marker，统一走 ::before 路线
- 用
background-image+padding-left方案兼容性最强（IE8+ 支持） - 若需动态图标，可结合 CSS 变量控制颜色，或用内联 SVG 配合
fill="currentColor"继承文字色
