::before 里的字体图标偏高或下沉是因为其默认 display: inline 且按 baseline 对齐，而图标字体无 descender；最稳定解法是 display: inline-block + vertical-align: middle + 父元素设置 line-height。
为什么 ::before 里的字体图标总偏高或下沉
因为 ::before 默认是 display: inline，按基线（baseline）对齐——文字有 descender（如 g、y 的下延部分），而图标字体没这个结构，视觉上就“浮起来”或“掉下去”。这不是 bug，是 inline 元素的正常行为。
常见现象：列表项前加 ::before 插 Font Awesome 图标，结果图标比文字高半截；按钮里图标和文字上下错位，换 font-size 就跑偏。
-
vertical-align: baseline是默认值，别指望它能对齐图标 -
vertical-align: top或vertical-align: bottom依赖固定行高，一调字体就失效 - 用
margin-top硬推？换设备或缩放后全乱
display: inline-block + vertical-align: middle 是最稳解法
把伪元素从文本流基线对齐，切换成盒模型中线对齐，绕过 baseline 计算差异。
必须同时满足三个条件，缺一不可：
-
display: inline-block—— 否则width/height无效，vertical-align不生效 -
vertical-align: middle—— 对齐父元素 x-height 中点，随font-size自适应 - 父元素有明确
line-height（比如line-height: 1.5），否则middle参照系模糊
示例：
.btn-icon::before {
content: "\f00c";
font-family: "Font Awesome 6 Free";
font-weight: 900;
display: inline-block;
vertical-align: middle;
font-size: 1em; /* 随文字缩放 */
}
绝对定位也能控位，但父容器必须 position: relative
当需要图标严格贴左/右、垂直居中且父元素高度不固定时，position: absolute 更可靠。但它不认父元素边框，只找最近的「已定位祖先」。
典型错误：::before 直接写 position: absolute; right: 0;，结果图标飞到页面右上角——因为没找到 position: relative 的父级，默认相对于 body 定位。
- 宿主元素（如
button、.nav-link）必须显式设position: relative -
::before上再写position: absolute+top: 50%+transform: translateY(-50%)实现垂直居中 - 记得用
padding-right或margin-right给文字留出空间，避免被遮挡
content 写错、字体没加载、伪元素隐身是三大隐形杀手
图标不显示，90% 卡在这三处，不是代码逻辑问题，而是上下文缺失。
-
content必须是 Unicode 转义，如"\f00c"；写成"f00c"、"fa-check"或 HTML 标签都无效 -
font-family值必须和@font-face声明完全一致（大小写、空格、连字符），Font Awesome 6 Free Solid 要配font-weight: 900 - 开发者工具里检查
::before的 computed 样式：font-family是否回退成serif，控制台是否报Failed to decode downloaded font -
content: ""仍会生成占位节点，可能撑开行高；真不需要内容又想留钩子，改用content: none
最容易被忽略的是：伪元素在 flex 容器里默认尺寸为 0，不加 display: inline-block 就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
