::before不能直接替换list-style-image，因其插入位置在内容内侧而非外侧独立区域，需通过display:inline-block/absolute+vertical-align/margin或top:50%+transform等组合精确控制对齐与定位，避免baseline错位和响应式错位。
为什么 ::before 不能直接替换 list-style-image 的行为？
因为 ::before 是在元素内容前插入生成内容，而 li 的默认 list-style 图标是渲染在内容外侧（通常左/右 margin 区域）的独立布局单元。直接对 li::before 设置尺寸或定位，容易和文本 baseline 对不齐，尤其在多行文本或不同字体下偏移明显。
关键不是“能不能用”，而是“怎么控制位置和对齐”。常见错误是只写 content: "●"; 却没重置 display 和 vertical-align，导致图标悬空或挤占文字空间。
- 必须将
li::before设为display: inline-block或display: flex，才能精确控制宽高和对齐 - 推荐用
vertical-align: middle配合line-height统一基线，而不是依赖默认baseline - 避免用
margin-left硬推位置——响应式断行时会错位，改用position: absolute+left更可靠
如何让自定义图标与文字垂直居中且不撑开行高？
核心是分离图标定位与文本流。把 li 设为 position: relative，再让 li::before 绝对定位到左侧固定位置，这样图标不参与文本排版，就不会影响 line-height 计算。
li {
position: relative;
padding-left: 24px; /* 为图标预留空间 */
}
li::before {
content: "✓";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
font-size: 12px;
}-
top: 50%+transform: translateY(-50%)是最稳定的垂直居中方式，兼容所有字体和字号 -
padding-left值必须 ≥ 图标区域宽度，否则文字会覆盖图标 - 如果用 SVG 或字体图标（如 Font Awesome），把
content换成url("icon.svg")或对应 Unicode 字符，但需注意 SVG 默认按比例缩放，建议加background-size: contain控制
用 ::before 实现带颜色/状态变化的列表项图标
伪元素可以响应父元素状态，比如 li:hover::before 或 li.active::before，这比 list-style-image 灵活得多——后者无法动态换图。
立即学习“前端免费学习笔记（深入）”；
- 颜色变化：直接改
color或background-color，对纯色图标最简单 - 图标切换：用不同
content值，例如.active li::before { content: "▶"; } - 动画过渡：给
li::before加transition: transform 0.2s，配合hover实现缩放或旋转 - 注意：
content属性本身不能过渡，所以切换图标适合用 class 控制，而非 hover 直接改 content
IE 下 ::before 列表图标失效的常见原因
IE11 及更早版本对伪元素在 li 上的支持有边界问题：如果 li 没设置 display: list-item（即使它是语义上的列表项），::before 可能被忽略或错位。
- 显式声明
li { display: list-item; }能解决大部分 IE 渲染异常 - 避免在
::before中使用flex或grid，IE11 对伪元素的 flex 支持不完整 - 如果要用背景图，优先选
background-image而非content: url()，前者在 IE 中兼容性更好 - 字体图标在 IE 中可能加载失败，建议 fallback 到 Unicode 字符或 SVG
真正麻烦的不是写法本身，而是当列表嵌套、缩进层级变多时，position: absolute 的 left 值要逐级计算；这时候用 CSS 自定义属性（--icon-offset）配合 calc() 会比硬编码更可控。
