CSS 如何实现文字下划线动画？

Question

CSS 如何实现文字下划线动画？

仓乃文 · Accepted Answer

文字下划线动画通过 background 渐变模拟下划线，利用 background-size 和 background-position 实现下划线从中间向两侧展开或从左到右滑入的效果。

```css
.underline-center {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) center bottom no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.3s ease;
}

.underline-center:hover {
  background-size: 100% 2px;
}
```

从左到右滑入：
```css
.underline-left {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.3s ease;
}

.underline-left:hover {
  background-size: 100% 2px;
}
```

多彩下划线：
```css
.underline-colorful {
  text-decoration: none;
  background: linear-gradient(90deg, #ff6b6b, #feca57) left bottom no-repeat;
  background-size: 0% 3px;
  transition: background-size 0.3s ease;
}

.underline-colorful:hover {
  background-size: 100% 3px;
}
```

补充说明：
- 用 background 渐变代替 text-decoration: underline，可控性更强
- currentColor 自动匹配文字颜色
- background-position 控制展开方向（center/left/right）
- 可设置不同粗细、颜色、虚线等效果