::before默认偏上是因为inline级元素按基线对齐，文字有下降部而图标无，属正常CSS行为；应优先用vertical-align: middle或flex布局解决，避免vertical-align: top或绝对定位依赖固定值。
伪元素::before的默认对齐行为为什么总偏上？
因为::before默认是inline级别，基线（baseline）对齐，而文字有下降部（descender），图标字体或content里的符号却没这个空间，视觉上就“浮起来”了。这不是bug，是CSS行内布局的正常表现。
常见错误现象：list-style: none后用::before加✓或箭头，结果图标比文字高半截，尤其在font-size不一致或用了line-height时更明显。
- 避免直接设
vertical-align: top——它会让图标贴顶，和文字中线脱节 - 优先用
vertical-align: middle，但注意：这里的“middle”是对父元素font-size的x-height中点，不是绝对居中 - 若图标来自字体（如Font Awesome），确保其
font-size与文本一致，否则vertical-align会失准
position: absolute配合top/left真能彻底控位？
能，但前提是父元素必须是position: relative——否则absolute会向上找最近的定位上下文，可能跑到body边缘去。
使用场景：需要图标严格左对齐、垂直居中，且列表项高度不固定（比如多行文本+图标）。
- 给
li加position: relative，再给::before设position: absolute; top: 50%; transform: translateY(-50%) - 不要只靠
top: 0或top: 5px——它们依赖固定像素值，响应式下易错位 - 如果
::before里是SVG或背景图，记得设width/height，否则transform可能无效
用display: flex替代伪元素是否更稳？
在现代项目里，是。伪元素适合纯装饰，但凡涉及点击、焦点、可访问性（如aria-hidden控制），用真实元素+flex更可控。
性能影响几乎为零，兼容性上flex在IE11需加-ms-前缀，而::before定位在IE8+都支持——但IE8不支持transform，所以真要兼容老浏览器，反而得退回vertical-align方案。
- 把图标写成
✓，和文字同级，再给li设display: flex; align-items: center - 这样
icon可单独加margin-right，也方便用:focus-within或JS操作 - 若坚持用伪元素，至少给
::before加aria-hidden="true"（虽然伪元素本身不进DOM树，但部分读屏器仍可能误读content）
为什么line-height一改，图标就“跳”？
因为vertical-align的计算基准受line-height直接影响——它决定行框（line box）高度，进而影响基线位置。设line-height: 1.2和line-height: 2，同一vertical-align: middle产生的偏移量完全不同。
最容易被忽略的一点：伪元素的line-height继承自父元素，但它自己没有内容高度，所以它的“中线”其实是空的——你调的是父行框的中线，不是图标的几何中心。
- 解决办法：统一用
flex布局绕过行框干扰；或固定line-height值（别用无单位数字），再微调vertical-align - 调试时临时加
outline: 1px solid red到li，看清行框实际范围 - 如果列表项有
padding，别忘了它不参与vertical-align计算，但会影响视觉对齐感知
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
