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