通过设置文本元素相对定位，利用::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的设置会影响生长方向。