::before圆点对不齐的根本原因是脱离原生marker对齐逻辑；应设li为block、显式定义line-height/font-size，用top:50%+transform居中，padding-left控制间距，CSS变量响应主题。
为什么 ::before 圆点总对不齐？
因为 li 默认是 display: list-item，它的原生圆点（marker）和内容流是耦合的；一旦你把 li 设成 position: relative，又用 ::before 绝对定位画新圆点，就完全脱离了原生对齐逻辑——此时圆点位置只取决于你写的 top/left 值，而这些值在不同字体、行高、浏览器下表现不一致。
常见错误现象：::before 圆点飘在文字上方、下沉、或水平偏移一截，尤其换字体或缩放页面后更明显。
-
line-height和font-size必须显式设定，不能依赖默认值（比如 Chrome 默认line-height: normal，Firefox 可能算得略不同） - 推荐用
top: 50%+transform: translateY(-50%)垂直居中，比固定top: 0.2em更稳定 - 水平方向优先用
left: 0+width控制间距，而不是靠margin-left推动文字——后者会让文本块宽度不可控
li 设 relative 后，::before 的 left 该设多少？
不是固定像素值，而是按内容区左边界对齐。真正该控制的是「圆点和文字之间的间隙」，这个间隙由 ::before 的 width + right 或外层 padding-left 共同决定。
使用场景：你需要圆点紧贴文字左侧、或统一留出 12px 间距、或适配 RTL 文本时。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥做法：给
li加padding-left: 24px（假设圆点宽 8px，间隙 16px），再让::before的left: 0，这样圆点就在 padding 区内左对齐 - 如果坚持用
left: -12px这类负值，必须配合box-sizing: border-box和已知容器宽度，否则响应式下易错位 - 不要用
em单位设left——它会随父级font-size缩放，但圆点大小未必同步缩放，导致间隙忽大忽小
IE11 或旧版 Safari 下 ::before 不显示圆点？
不是兼容性问题，是触发条件没满足。IE11 要求 ::before 必须有 content 且不能为空字符串；旧 Safari（如 9.1）对 position: absolute 在 display: list-item 内部的支持有 bug，所以必须先把 li 显式改成 display: block。
性能影响：现代浏览器里 ::before 渲染开销极小，但若列表项超 1000 条，建议用 CSS 自定义属性批量控制颜色/尺寸，避免重复声明。
- 必须写
content: ""，哪怕只是空字符串，缺了就完全不渲染 - 加
display: block到li规则里，别只靠position: relative暗示布局模式改变 - 避免在
::before里用box-shadow模拟圆点——模糊半径在低分屏上发虚，且比background-color+border-radius多一次绘制
怎么让圆点随文字变色或响应主题切换？
直接读取当前文字颜色最可靠，别硬编码颜色值。CSS 变量在这里是唯一干净解法，否则就得 JS 动态写 style。
容易踩的坑：用 currentColor 时，如果 li 或其祖先显式设置了 color，会覆盖继承链；而主题切换常通过 body class 控制，需确保变量作用域覆盖到 ::before。
- 在 :root 里定义
--dot-color: currentColor，然后::before { background-color: var(--dot-color) } - 如果主题色存在深浅模式差异，把变量挂到
body.theme-dark下，而不是只改color，否则currentColor会取错 - 别用
inherit替代currentColor——前者继承父元素 color，后者继承用于描边/填充的“当前颜色”，语义更准
