伪元素图标不能直接和文本对齐，因为::before默认为inline元素且基线与文本不一致；最稳解法是设display:inline-block+vertical-align:middle，并确保content非空、父元素有明确line-height。
伪元素图标为什么不能直接和文本对齐
因为 ::before 默认是 inline 元素，但它的基线（baseline）和父元素文本的基线不一致，尤其当图标用字体（如 iconfont）或 SVG data URL 时，vertical-align 缺省为 baseline，导致图标下沉、错位。单纯靠 margin-top 或 padding 硬调，换字体大小或行高就失效。
用 display: inline-block + vertical-align: middle 是最稳的解法
把 ::before 显式设为 inline-block，再统一用 vertical-align: middle 对齐文本中线，能避开 baseline 计算差异。关键点：
-
content必须非空（哪怕只是" "），否则::before不渲染 - 父元素需有明确的
line-height（比如line-height: 1.5），否则vertical-align: middle参照系模糊 - 图标尺寸建议用
em或ex单位，随文本缩放（例如font-size: 1.2em） - 避免给
::before设height或line-height，会干扰行内盒计算
示例：
.icon-text::before {
content: "★";
display: inline-block;
vertical-align: middle;
font-size: 1.1em;
margin-right: 0.3em;
}
.icon-text {
line-height: 1.6;
}
字体图标（如 iconfont）场景下的额外注意
很多 iconfont 的 glyph 垂直位置偏上或偏下，即使加了 vertical-align: middle 仍可能微偏。这时优先用 font-size-adjust 或调整 vertical-align 为具体数值（如 -0.15em），而不是改 top 或 transform —— 后者会破坏行内流布局，影响换行和文字环绕。
