list-style-type 不能实现真正自定义符号，仅支持枚举值如 disc、square；写字符串或 unicode（如 "✅"）会被浏览器静默忽略并回退为 disc。
直接说结论：list-style-type 不能真正实现“自定义符号”——它只认固定关键字，写 list-style-type: "✅" 或 list-style-type: "»" 完全无效，浏览器会静默忽略并回退到 disc。
为什么 list-style-type 写字符串/Unicode 总是失败
规范明确限定该属性只接受枚举值（如 square、lower-greek、decimal），不接受任何字符串、Unicode 转义或表达式。常见错误现象：
- 开发者工具里看到计算值是
disc，但源码写了"★"→ 实际被丢弃 - Safari 对
cjk-ideographic等值渲染不稳定，可能 fallback 成decimal -
list-style-type: none后文本左偏 → 它只隐藏符号，不重置缩进（margin-left或padding-left仍存在）
真正可用的自定义方案：用 li::before 替代原生符号
这是目前兼容性最好（IE11+ 全支持）、控制最细的路径，适用于所有编辑器环境（VS Code、WebStorm、在线编辑器等）：
- 先关闭原生符号：
ul, ol { list-style-type: none; padding-left: 0; } - 给
li设position: relative，为伪元素定位打基础 -
li::before中用content: "•"或content: "?"，配合position: absolute; left: 0; top: 50%; transform: translateY(-50%);垂直居中多行文本 - 颜色、大小、间距全部可控：
color: #2563eb; font-size: 1.1em; margin-right: 8px; - 避免用
margin-left控制符号与文本距离，改用padding-left配合left值更稳定
什么时候可以试试 ::marker？
::marker 是 CSS Pseudo-Elements Level 4 新特性，语法简洁但落地限制多：
- Chrome 89+ / Firefox 89+ / Safari 15.4+ 支持，但 iOS 15.3 及更早、Android WebView（尤其旧版）基本不可用
-
content: attr(data-bullet)动态读取 HTML 属性仅 Firefox 支持，Chrome/Safari 忽略 - 不支持
background、border、display（强制 inline），margin/padding也无效 - 换行时垂直对齐容易错位，
::before的transform更可靠
有序列表编号被截断？别只调 list-style-position
默认 list-style-position: outside 会让高位数（如 100+）挂在行框外，窄容器或小 line-height 下易裁切。实操要点：
-
list-style-position: inside可让编号进文本流，但会破坏原有缩进逻辑，需手动重设padding-left - 更稳妥做法：保持
outside，给ol加padding-left: 2rem，再微调text-indent或margin-left对齐 - 复杂编号（如 “2.3.1”）必须用 CSS counters，
list-style-type根本不支持
真正麻烦的点不在写法，而在于：符号是否显示，取决于 list-style-type 值 + display 类型 + 父容器布局（flex/grid 会切断列表语义）+ 层叠顺序。调试时优先看开发者工具里 li 的最终计算值，而不是源码写了什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
