通过设置文本元素相对定位，利用::after伪元素创建下划线并默认缩放为0；2. hover时通过transform: scaleX(1)使下划线从左向右展开，结合transition实现渐变动画；3. 可使用linear-gradient设置渐变色下划线，增强视觉效果。该方法流畅且不引发布局抖动，关键在于transform-origin控制生长方向。
要实现CSS元素在hover时文字下划线渐变出现的效果，可以使用::after伪元素配合transition来控制动画过程。这种方式灵活且视觉效果流畅，适合用在导航链接或标题交互中。
1. 基本结构与样式设置
先为文本元素（如a标签或span）设置相对定位，以便::after伪元素能准确定位在文字下方。
<span style="color: #0000ff;">a</span> {
<strong>position</strong>: relative;
<strong>color</strong>: #000;
<strong>text-decoration</strong>: none;
}
2. 使用::after创建下划线
通过::after在元素底部添加一条窄条作为下划线，默认隐藏或缩放为0。
<span style="color: #0000ff;">a::after</span> {
<strong>content</strong>: '';
<strong>position</strong>: absolute;
<strong>left</strong>: 0;
<strong>bottom</strong>: -2px;
<strong>width</strong>: 100%;
<strong>height</strong>: 2px;
<strong>background</strong>: #007acc;
<strong>transform</strong>: scaleX(0);
<strong>transform-origin</strong>: left;
<strong>transition</strong>: transform 0.3s ease;
}
这里使用transform: scaleX(0)让下划线初始不可见，从左侧开始生长。
立即学习“前端免费学习笔记（深入）”；
3. hover时显示渐变下划线
当鼠标悬停时，将scaleX恢复为1，触发平滑过渡。
<span style="color: #0000ff;">a:hover::after</span> {
<strong>transform</strong>: scaleX(1);
}
这样下划线会从左向右“展开”，实现渐现动画效果。
4. 可选增强：颜色渐变下划线
如果想让下划线本身是渐变色，可结合linear-gradient。
<span style="color: #0000ff;">a::after</span> {
<strong>background</strong>: linear-gradient(to right, #ff7a59, #faae6f);
}
渐变背景在动画过程中也会完整展现，视觉更丰富。
基本上就这些。利用::after和transition，既能避免布局抖动，又能实现细腻的下划线入场动画。不复杂但容易忽略细节，比如transform-origin的设置会影响生长方向。
