::marker伪元素无法直接设置color或background-color，仅能继承父级li的color值；需用li::before模拟并禁用原生list-style，通过position:absolute和transform精准对齐以适配多行、动态字号等复杂场景。
::marker 伪元素不能直接设 color 或 background-color，它只继承父级 li 的 color 值——这不是你写错了，是浏览器规范限制。
为什么直接给 ::marker 写 color 没用？
主流浏览器（Chrome 89+、Firefox 87+、Safari 15.4+）都遵循 CSS Pseudo-Elements Level 4 规范：::marker 只能继承 color，不支持 background、border、font-weight 等独立样式。哪怕你写了 li::marker { color: red; }，只要 li 自身没设 color，它就还是默认色。
-
ul或ol上设color不会传递给::marker，必须作用于li元素本身 - 如果
li里有文字要不同颜色，得用span包裹文字并重置color -
::marker的content只接受字符串（如"•"），不能插 SVG 或图标字体
想让小圆点和文字颜色不同，只能用 li::before
这是唯一可靠方案：禁用原生标记，用伪元素完全接管渲染。关键点不是“能不能做”，而是“对齐是否精准”——稍不注意就会上下错位。
- 必须设
li { list-style: none; position: relative; }，否则::before定位会漂移 -
vertical-align: middle在行内场景下常失效，推荐用transform: translateY(-50%)+top: 50% - 宽度/高度建议用
em单位（如width: 0.4em; height: 0.4em;），随字号缩放更稳 - 如果列表项含多行文本，
line-height和margin-top要同步调，否则 bullet 只对齐第一行
兼容性差的旧环境（IE / 老安卓 WebView）怎么办？
这些环境根本不识别 ::marker，连降级都不行——必须从一开始就用 li::before 方案，且避免依赖 flex 或 grid 布局来对齐。
立即学习“前端免费学习笔记（深入）”；
- 不用
display: flex包裹li，老浏览器里::before容易塌陷 - 背景图方案（
list-style-image）虽简单，但无法响应式缩放，SVG 图片在部分老 WebView 中渲染异常 - 若需支持 iOS 14.5 以下 Safari，
position: absolute的::before是最稳妥选择，别碰inset或contain
真正麻烦的不是怎么画个圆点，而是当列表文字换行、字号动态变化、或嵌套在弹性容器里时，那个小圆点还能不能稳稳钉在第一行文字左侧中间——这点几乎没人提，但线上 bug 大多出在这儿。
