::marker不支持content: url()，因规范限定其content仅接受字符串、counter()或none；ul中限制更严，ol中主流浏览器也拒绝解析url()，直接回退默认符号。
::marker 不支持 content: url() 插入图片图标，写了也无效。 这不是浏览器 bug，而是规范明确限制：对 ul 的 ::marker，content 只接受字符串、counter() 或 none；对 ol 虽稍宽松，但所有主流引擎（Chrome 115+、Safari 16.4+、Firefox 115+）均拒绝解析 url() 值，直接 fallback 到默认符号。
为什么 content: url(arrow.svg) 在 ::marker 里不显示
根本原因在于 ::marker 是语义化标记容器，不是通用内容生成器。它的 content 属性仅用于替换“文本型标记”，而非加载外部资源。浏览器遇到 url() 会静默忽略，不报错也不渲染——你看到的仍是圆点或数字，不是图标。
- 写
ul li::marker { content: url("check.svg"); }→ Firefox 完全无视，Chrome/Safari 渲染为默认圆点 - 即使 SVG 路径正确、服务器返回 200，也不会加载
-
@supports (content: url(""))检测永远为 false，因为该语法本身不被支持
::marker 中 content 的真实可用值有哪些
只认三类值，且有严格限制：
-
纯字符串：
content: "→ ";、content: "•";、content: "【";—— 最稳妥，全浏览器兼容 -
counter()表达式：content: counter(list-item) ". ";（ol下可用）、content: "[" counter(level-1) "] ";（嵌套时需配合counter-increment） -
attr()（极有限）：content: attr(data-marker);仅输出属性原始字符串，不能做映射或转义，且ul下部分浏览器不支持
注意：content: "✓" 可用，但 content: "13"（Unicode 十六进制写法）在 Firefox 中可能渲染为方块，建议直接粘贴符号。
想用图片图标，该用什么替代方案
放弃 ::marker + url()，改用更可控的组合：
-
list-style: none+::before：给li设position: relative，::before用background-image或内联 SVG，显式控制width/height/background-size -
内联 SVG 配合
mask：把 SVG 写进content的 data URL（如content: url("data:image/svg+xml,...")），但必须搭配mask和background-color才能着色，且::marker不支持mask—— 所以仍得走::before -
字体图标：用
font-family+ Unicode 字符码，比图片更轻量、可继承颜色，但需引入字体文件
例如：li::before { content: ""; display: inline-block; width: 1em; height: 1em; background: url("icon.svg") no-repeat center; background-size: contain; margin-right: 0.5em; vertical-align: middle; }
真正容易被忽略的是：很多人试图用 ::marker 实现“图标+文字颜色同步”，结果发现图片无法随 color 变色——这恰恰暴露了它的设计边界：它不是装饰层，而是语义标记层。需要动态填色或高清缩放，就别硬塞进 ::marker。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
