用::after伪元素实现文字下划线动画的核心是绝对定位伪元素并动态伸展：方式一用transform:scaleX(0→1)+transform-origin:left，性能更优；方式二用width:0→100%需容器overflow:hidden。
用 ::after 伪元素实现文字下划线动画，核心是让伪元素从左到右（或其它方向）动态伸展，覆盖在文字下方。关键在于：伪元素需绝对定位、宽度为 0 起始、通过 transform: scaleX() 或 width 过渡，并配合 overflow: hidden 或精准定位控制起始状态。
1. 基础结构：文字容器 + 伪元素下划线
给目标文字（如 <span> 或 <a>）设置相对定位，使 ::after 可以相对于它定位；伪元素设为绝对定位，放在文字正下方。
- 文字容器必须设
position: relative -
::after设content: ""、position: absolute - 常用定位方式：
bottom: -2px（微调距离）、left: 0、height: 2px
2. 动画实现：两种主流过渡方式
方式一：用 transform: scaleX(0) → scaleX(1)
性能更好，推荐优先使用。需配合 transform-origin: left 保证从左开始展开。
.underline {
position: relative;
display: inline-block;
}
.underline::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: #007bff;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.underline:hover::after {
transform: scaleX(1);
}
方式二：用 width: 0 → width: 100%
更直观，但注意要设 overflow: hidden 在容器上，否则初始时可能看到“缩在左边”的线段。
立即学习“前端免费学习笔记（深入）”；
- 容器加
overflow: hidden防止伪元素溢出 - 伪元素
width从0过渡到100% - 确保
left: 0，否则可能偏移
3. 常见优化细节
避免文字抖动： 给伪元素加 will-change: transform（仅动画时）或确保不触发重排。
适配不同字体大小： 把 bottom 和 height 改成基于 em 单位，例如 bottom: -0.15em、height: 0.1em，提升响应性。
反向动画（鼠标移出时收回）： 只需确保 hover 状态有过渡，非 hover 状态也写好初始值，CSS 自动反向执行。
4. 扩展效果示例
从中间向两边展开： transform-origin: center，初始 scaleX(0)，hover 时 scaleX(1)。
带颜色渐变的下划线： 伪元素背景用 linear-gradient，配合 background-size + background-position 动画也可实现流动感。
