::marker伪元素不支持content属性插入svg或字符串，仅允许空值、none或计数器；需用::before配合url()、background-image或mask实现可控图标。
marker伪元素不支持content属性，别白费劲了
直接说结论：::marker 不能用 content 插入 SVG 或任何字符串——这是 CSS 规范明确禁止的。你看到的“用 content 放矢量图”方案，基本都混淆了 ::before/::after 和 ::marker 的职责。
浏览器对 ::marker 的支持非常克制：目前只允许设置 content 为 ""（清空）、none（移除），或使用 string 类型的计数器值（比如 counter(list-item)），但**不允许写 url()、svg、data: 或任何带引号的字符序列**。
想用 SVG 图标当列表符号？走 ::before 路线更靠谱
真正能自由插入矢量图的地方是 ::before，它支持 background-image、mask、content: url(...)，且可精准控制尺寸和定位。
-
content: url("data:image/svg+xml,...")最轻量，适合简单图标（注意 URL 编码） -
background-image: url(...)更稳定，兼容性好，配合background-size控制缩放 - 必须设
display: inline-block+ 明确width/height，否则 SVG 可能塌陷或溢出 - 记得加
vertical-align: middle或top，不然图标容易和文字基线错位
li::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M8 0a8 8 0 100 16A8 8 0 008 0zm.5 11.5l-3-3 1.4-1.4 1.6 1.6 3.6-3.6L13 6l-5.5 5.5z'/%3E%3C/svg%3E");
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
margin-right: 0.5em;
}用 mask 配合 background-image 实现单色 SVG 自适应填色
如果希望 SVG 图标随文字颜色自动变色（比如 dark mode 下不用改 CSS），mask 是比 content: url() 更灵活的选择。
立即学习“前端免费学习笔记（深入）”；
-
mask只认灰度，SVG 中所有非透明区域都会变成“镂空”，背景色从父元素继承 - 把 SVG 当 mask 图，再用
background-color或color控制最终显示色 - 必须设
-webkit-mask+mask双写，Safari 仍需前缀 - 避免用
background-image: url(svg)直接加载，部分浏览器会忽略 fill 属性
li::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
-webkit-mask: url("icon-check.svg") no-repeat center;
mask: url("icon-check.svg") no-repeat center;
background-color: currentColor; /* 随 text color 变 */
margin-right: 0.5em;
}list-style-image 兼容性好但缩放难、无法动态换色
list-style-image 看似最直觉，但它在现代开发中其实最不推荐——尤其当你需要响应式、暗色模式或统一配色时。
- 它不接受内联 data URL（Chrome 119+ 才开始有限支持，Firefox/Safari 基本不认）
- 图片尺寸完全由
list-style-image自己决定，无法用background-size控制 - 没法和文字颜色联动，换主题就得切两套图片资源
- IE 和旧 Edge 里容易出现垂直对齐 bug，且不支持
object-fit类行为
除非项目明确要求支持 IE11，或者列表项极其静态、图标极少变化，否则绕开它。
真正难的不是怎么塞进一张图，而是让这张图在不同字号、不同主题、不同缩放比例下始终对齐、清晰、语义正确。这时候 ::before + mask 或精简 data URL 是目前最可控的路径。
