list-style-type 仅支持规范枚举值，无法直接设 unicode 或字符串；自定义符号须用 ::before（兼容性好、控制精细）或 ::marker（新特性但兼容差），有序列表截断需调整 list-style-position 或用 counters。
list-style-type 不能真正“自定义”符号，它只支持固定枚举值；想用 ✅、»、SVG 或任意字符，必须绕过它，用 ::before 或 ::marker。
为什么直接写 list-style-type: "★" 没用
浏览器会忽略非法值并回退到默认 disc。CSS 规范明确限定 list-style-type 只接受关键字（如 square、decimal、cjk-ideographic），不接受字符串、Unicode 字符或表达式。
- 错误写法：
list-style-type: "→"→ 完全无效 - 合法但受限：
list-style-type: lower-greek→ 仅希腊字母，且 Safari 渲染不稳定 -
none不等于“清空缩进”，它只隐藏符号，padding-left或margin-left仍存在，常导致文本左偏
用 ::before 实现稳定可控的自定义符号
这是目前兼容性最好、控制最细的方案，适用于 IE11+ 和所有现代浏览器，支持颜色、大小、对齐、响应式缩放和 fallback。
- 先禁用原生符号：
list-style-type: none+padding-left: 0 - 给
li设position: relative，为伪元素定位打基础 -
li::before中用content: "•"或content: "✅"，配合position: absolute; left: 0;对齐 - 若需图标居中对齐多行文本，加
top: 50%; transform: translateY(-50%) - 避免用
margin-left控制间距，改用padding-left配合left值更可靠
::marker 看似简洁，但实际限制多
::marker 是 CSS Pseudo-Elements Level 4 的新特性，Chrome 89+/Firefox 89+/Safari 15.4+ 支持，但旧版 Safari 和安卓 WebView 基本不可用。
- 它只能设置
content、color、font，不支持background、border、display（强制 inline） -
content: attr(data-bullet)动态读取属性仅 Firefox 支持，Chrome/Safari 忽略 - 当
li内容换行时，::marker垂直对齐容易错位，而::before可用transform精确修正 - 如果项目要支持 iOS 15.3 以下或 Android 10 WebView，
::marker必须降级
有序列表编号被截断？先查 list-style-position
默认 list-style-position: outside 会让数字挂在行框外，高位数（如 100+）在窄容器或小 line-height 下容易被裁切。
- 设
list-style-position: inside可让编号进入文本流，但会破坏原有缩进逻辑，需手动重设padding-left - 更稳妥的做法是保持
outside，给ol加padding-left并微调text-indent或margin-left对齐 - 复杂编号（如 “2.3.1”）必须用 CSS counters，
list-style-type根本不支持嵌套格式
真正自由的符号定制，从来不是靠改一个属性值搞定的；关键在于理解 list-style-type 的边界——它负责语义化编号/标记类型，而不是像素级控制。越早放弃“用它塞图标”的念头，越少掉进渲染不一致和兼容性黑洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
