::marker 不能用 transform 旋转，因其非完整 DOM 节点，仅支持 content、color、font-* 和 list-style-type；Chrome/Firefox 忽略 transform 等属性，Firefox 119+ 仅支持 rotate 新属性且兼容性差；可靠方案是用 ::before 替代并配合 padding-inline-start、inset-inline-start 及内联 SVG 实现可控旋转。
为什么 ::marker 不能直接用 transform 旋转
因为浏览器对 ::marker 的支持非常有限——它本质上不是完整 DOM 节点，多数引擎（Chrome/Firefox）只允许设置 content、color、font-* 和 list-style-type 相关属性。transform、margin、position 全部被忽略，强行写也不会生效。
常见错误现象：::marker { transform: rotate(90deg); } 看不到任何变化；开发者误以为是写法错，反复检查选择器或拼写，其实根源是规范限制。
- 目前唯一可靠控制图标方向的方式：改用
content+ Unicode 符号或 SVG 字体（如●→▶→▼） - 若必须动态旋转（比如折叠/展开状态），得放弃
::marker，改用::before模拟 - Firefox 119+ 开始支持
::marker { rotate: 45deg; }（非 transform，是新属性），但 Chrome/Safari 完全不支持，不可用于生产
用 ::before 替代 ::marker 实现可控旋转
这是实际项目中最稳的解法：把列表项的“图标”完全接管过来，用 ::before 生成、定位、旋转，彻底绕过 ::marker 的限制。
使用场景：需要响应式旋转（如点击切换箭头方向）、自定义间距、适配深色模式图标颜色、或统一管理所有列表前缀样式。
立即学习“前端免费学习笔记（深入）”；
- 必须给
li设置position: relative，否则::before的absolute定位会脱标 -
content推荐用 SVG data URL 或字体图标（如content: "▸";），避免图片请求和跨域问题 - 水平间距靠
left+width控制，别依赖margin-left—— 它在 inline 元素上行为不稳定
li {
position: relative;
padding-left: 24px;
}
li::before {
content: "▶";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) rotate(0deg);
font-size: 12px;
}
list-style-image 配合 SVG 的旋转兼容方案
如果坚持用原生列表机制，list-style-image 是少数能间接“旋转”的路径——把旋转逻辑写进 SVG 文件本身，再引用。
性能影响小，但维护成本高：每个方向都要单独导出 SVG，无法运行时动态切角度。
- SVG 内必须显式写
<g transform="rotate(90)"></g>，外部 CSS 无法干预 - 路径需用绝对地址或 base64，相对路径在某些构建工具里容易 404（比如 Vite 中
url(./arrow.svg)可能失效） - IE 完全不支持
list-style-image的 SVG，如需兼容，得 fallback 到 PNG +@supports
示例：li { list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cg transform='rotate(90 5 5)'%3E%3Cpath d='M2 4l3 3 3-3'/%3E%3C/g%3E%3C/svg%3E"); }
间距控制：为什么 padding-inline-start 比 padding-left 更安全
当页面启用 RTL（如 dir="rtl"）或未来要支持多语言时，硬写 padding-left 会导致图标和文字粘连——它不随文本方向翻转。
容易踩的坑：本地开发只测 LTR，上线后阿拉伯语用户反馈列表项挤成一团，排查半天才发现是方向相关属性没用对。
- 一律用
padding-inline-start替代padding-left，它会自动适配dir值 -
::before的inset-inline-start也比left更可靠（同理适用于top/bottom→inset-block-start） - 旧版 Safari（≤15.4）不支持
inset-inline-start，可加left降级，但注意两者不要同时生效导致覆盖
::marker 死磕 transform。真正要动的，是用什么替代它、怎么让替代方案在 RTL/缩放/高对比度下依然稳定。细节都在定位方式、方向感知属性和 SVG 内联写法里。 
