::marker不能直接设置颜色以外样式，因其仅支持color、content、font相关属性等极少数CSS属性，不支持margin、padding、background等；content合法值为字符串字面量（如"• "）、none，不支持url()、attr()或counter()函数；复杂样式需用list-style:none+li::before模拟。
为什么 ::marker 不能直接设置颜色以外的样式？
因为浏览器对 ::marker 的支持有限，目前（Chrome 99+、Firefox 97+、Safari 15.4+）只允许使用少数 CSS 属性： color、content、font 相关属性（如 font-size、font-weight）、text-align（仅在部分场景生效），但不支持 margin、padding、background、transform 或 display。试图写 ::marker { background: red; } 会被忽略。
::marker 中 content 的合法值有哪些？
content 只接受字符串字面量、string() 函数（极少适用）、或 none；不支持 url()、attr() 或生成计数器（如 counter(list-item)）——这些在 ::before 里可用，但在 ::marker 里无效。
-
::marker { content: "• "; }✅ 替换默认圆点 -
::marker { content: "→ "; }✅ 自定义箭头符号 -
::marker { content: none; }✅ 彻底隐藏标记（注意：不会移除缩进，需配合list-style: none+ 手动缩进） -
::marker { content: url(icon.svg); }❌ 无效，会被丢弃 -
::marker { content: counter(item); }❌ 不支持计数器函数
如何真正实现带背景/图标/复杂布局的列表标记？
当 ::marker 能力不足时，得退回到传统方案：禁用原生标记，改用 ::before 模拟。这是目前最可靠的做法。
- 给
li设置list-style: none，消除原生标记 - 用
li::before插入内容，此时可自由使用background、width、height、border-radius等 - 用
position: absolute或flex控制对齐，避免影响文本流 - 注意：若需保持语义化编号（如有序列表），需手动用
counter-reset/counter-increment配合content: counter(...)
示例：
ol.custom {
list-style: none;
padding-left: 0;
}
ol.custom li {
position: relative;
padding-left: 28px;
}
ol.custom li::before {
content: counters(item, ".") ".";
position: absolute;
left: 0;
width: 20px;
height: 20px;
background: #007bff;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
兼容性与 fallback 怎么处理？
::marker 在 Safari 15.4 之前完全不支持，IE 完全不支持。如果项目需兼容旧版 Safari 或需要更复杂样式，::before 方案是唯一选择。可以用 @supports (::marker) { ... } 做渐进增强，但别指望它兜底——多数真实业务场景中，直接上 ::before 更省心。
真正容易被忽略的是缩进一致性：原生 ::marker 自带文本对齐逻辑，而手动 ::before 需精确控制 padding-left 和 left 值，否则多行文本会错位。测试时务必用长文本和不同字号验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
