用::after伪元素配合transform:scalex()实现居中展开下划线的核心思路是：通过绝对定位伪元素模拟下划线，初始scalex(0)隐藏，hover时scalex(1)并设transform-origin:center实现从中点向两侧伸展，需父元素设position:relative，transition写在::after上且仅作用于transform。
用 ::after 伪元素配合 transform: scaleX() 实现中间展开效果
核心思路是：不直接操作文字的 text-decoration，而是用一个绝对定位的伪元素模拟下划线，并通过缩放控制展开方向。默认 scaleX(0) 隐藏，悬停时变为 scaleX(1)，再配合 transform-origin: center 就能从中间向两边伸展。
常见错误是忘记设 transform-origin —— 默认是左上角，会导致下划线从左往右“拉伸”，不是居中展开。
-
position: relative必须加在父元素（如a标签）上，否则::after的绝对定位会脱离预期位置 -
::after的width设为100%，height控制粗细（如2px），background-color设颜色 - 过渡必须写在
::after上，而不是父元素；且要明确指定transform属性：transition: transform 0.3s ease
完整可复用的 CSS 片段（支持多行文本和响应式）
下面这段代码已验证在 Chrome/Firefox/Safari 中正常工作，也兼容 Flex 或 Grid 容器内的链接：
a {
position: relative;
text-decoration: none;
color: inherit;
}
a::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: currentColor;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s ease;
}
a:hover::after {
transform: scaleX(1);
}
注意：bottom: -2px 是为了让下划线紧贴文字基线下方；若字体偏高或用了 line-height，可能需要微调这个值。
为什么不用 width 动画？
用 width: 0 → width: 100% 看似直观，但实际有隐患：
- 当父容器宽度动态变化（比如响应式布局、Flex 自适应）时，
width动画会因重排导致卡顿或错位 -
transform是合成属性，GPU 加速友好，性能更稳 -
transform-origin能精准控制缩放中心点，width只能从左到右或右到左扩展，无法原生实现“中点出发”
另外，transform: scaleX() 不影响文档流，不会触发重排；而 width 改变可能间接影响兄弟元素布局。
遇到下划线偏移或闪烁怎么办？
典型现象：悬停瞬间下划线跳一下、或始终偏上/偏下；常见于使用了 vertical-align、line-height 不一致、或字体度量差异大的场景。
- 优先用
bottom: calc(-1 * ex)替代固定像素值，ex是 x-height 单位，比px更贴合字体自身度量 - 如果链接内含
inline-block子元素，检查是否触发了baseline对齐问题，可加vertical-align: bottom统一对齐方式 - 极少数情况下 Safari 会出现
::after渲染延迟，加will-change: transform到::after可缓解
真正难调的其实是字体本身——不同字体的 descender/ascender 差异会让“同一组数值”在不同页面看起来位置不一。建议把 bottom 值当作项目级变量统一维护，而不是硬编码进通用组件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
