li::marker 不能用 absolute 定位，别试了
浏览器对 ::marker 伪元素的支持非常有限——它不接受 position: absolute、不响应 left 或 top，甚至多数 CSS 属性（比如 display、width）都会被忽略。你写的 li::marker { position: absolute; left: -20px; } 在所有主流浏览器里都无效。
真正能控制圆点位置的，只有两个可靠路径：改 list-style-position，或者彻底放弃原生圆点、用自定义伪元素模拟。
list-style-position: inside/outside 的实际效果差异
这个属性控制的是原生标记（圆点、数字等）和 li 文本内容的相对关系，不是绝对像素偏移。它只影响“文本换行时圆点是否随行缩进”，不改变圆点在行首的横向坐标。
-
list-style-position: outside（默认）：圆点在li的 content box 左侧外边，文本从padding-left起始；圆点不参与文本流，但它的横向位置由padding-left隐式撑开 -
list-style-position: inside：圆点被拉进li的 content box 内，和第一行文本左对齐；此时换行后第二行文本会顶到左边，没有缩进
想让圆点离文字更远？直接调大 li 的 padding-left，而不是指望 list-style-position 做定位。
立即学习“前端免费学习笔记（深入）”；
用 li::before 模拟状态圆点并精确定位
这是最可控的做法：关掉原生标记，用 ::before 画一个圆点，再用 position: absolute 定位到任意位置。关键在于父容器 li 必须设 position: relative，否则 absolute 会相对于 body 或最近定位祖先偏移。
li {
position: relative;
padding-left: 32px; /* 给圆点留出空间 */
list-style: none; /* 关掉原生圆点 */
}
li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #333;
}常见错误：
- 漏写
li { position: relative; }→ 圆点飞到页面左上角 - 用
margin-left替代padding-left→ 圆点定位正常，但文字可能和圆点重叠（因为 margin 不占布局空间） - 没设
list-style: none→ 原生圆点和自定义圆点同时出现
兼容性与状态联动的实际限制
如果圆点要反映不同状态（如 success / error / pending），用 ::before 是唯一可行方案。但注意：::before 无法直接读取 HTML 属性值，得靠 class 控制样式：
<li class="status-pending">等待中</li> <li class="status-success">已完成</li>
对应 CSS：
li.status-pending::before { background-color: #ffaa00; }
li.status-success::before { background-color: #4caf50; }别试图用 attr(data-status) 动态生成颜色——attr() 在 ::before 中只支持字符串输出，不能用于计算或条件判断。状态逻辑必须提前转为 class。
圆点大小、间距、垂直居中这些看似简单的事，在不同字体、行高、缩放比例下表现不一。最稳的方式是固定 line-height 和 font-size，再用 transform: translateY(-50%) 居中，而不是依赖 top: xpx。
