最推荐用::marker插入内联SVG，因其语义正确、支持自动缩放与color继承；需确保SVG含viewBox且fill="currentColor"，仅支持content、color、font-size等有限属性。
用 ::marker 插入内联 SVG（推荐，现代浏览器）
这是目前最干净、语义最正的方式，::marker 专为替换项目符号设计，支持 SVG 内联、自动缩放、颜色继承，且不干扰文字排版。
关键点：SVG 必须用 fill="currentColor"，否则 color 不生效；viewBox 必须存在；content: url() 可直接引用本地路径或 data URL。
li::marker { content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); font-size: 1.2em; color: #28a745; }- 若用外部 SVG 文件，确保服务器返回
Content-Type: image/svg+xml，否则 Safari 可能拒绝渲染 - 不支持
background、transform或margin，能用的属性很有限：content、color、font-size、text-align
用 ::before 伪元素（需交互或响应式时必选）
当你要 hover 变色、动画、或图标尺寸随屏幕变化时，::before 是唯一可靠选择。它本质是独立元素，可自由定位和样式化。
常见错误：忘记给 li 加 position: relative，导致 ::before 相对整个页面定位；漏写 content: "" 的空引号；padding-left 算错导致文字覆盖图标。
立即学习“前端免费学习笔记（深入）”；
- 先清默认：
ul { list-style: none; } -
li { position: relative; padding-left: 28px; }（28px ≥ 图标宽 + 6px） li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url("check.svg") no-repeat center / contain; }- 如需 SVG 填色控制，改用
content: url("data:image/svg+xml,...")，但注意 IE 和旧 Safari 不支持
用 background-image + padding-left（兼容老旧环境）
IE8+ 都能跑，自由度高，但图标不随 font-size 缩放，换行后文字左对齐整行（不是“挂”在图标下），这点和原生 list-style 行为不同。
容易踩坑：背景图没设 background-position: left center 导致上下偏移；padding-left 值小于图标宽度加间距，文字压住图标；background-size 没配，SVG 在高 DPI 屏幕糊掉。
ul { list-style: none; padding-left: 0; }li { padding-left: 26px; background: url("check.svg") no-repeat left center; background-size: 14px auto; }- 若图标是 PNG，建议提供 2x 版本并用
@media (-webkit-min-device-pixel-ratio: 2)切换 - 无法被屏幕阅读器识别，纯装饰用途；别用在需要语义传达的列表项上
list-style-image 为什么基本不用了
它看着最简单，但限制极多：不支持内联 SVG（url("data:image/svg+xml,...") 在 Safari 15.3 及更早版本失效）；图标大小固定、不缩放；无法垂直居中；路径出错时静默失败，连控制台都不报错。
仅剩一个适用场景：全站统一用同一张小 PNG 作 bullet，且不需要任何定制，也不关心暗黑模式或响应式。
ul { list-style-image: url("bullet.png"); }- 必须确保
bullet.png路径可访问，且尺寸在 12×12 到 16×16 像素之间 - 若想兜底，得配合
list-style: square inside，但顺序不能错：list-style: square inside url("bullet.png");—— URL 必须紧贴末尾，中间不能有空格
::marker 还是退回到 background-image。 
