CSS动态下划线动画如何从左至右展开改为右至左展开

安全阿岳

2026-10-23

实现从右到左展开的动态下划线效果

核心逻辑非常简单，不需要改动你原有的过渡、颜色、尺寸规则，只需要调整背景的水平锚定位置，就可以把展开方向完全反过来。

具体修改点

把原有样式里的background-position: 0 80% 修改为 background-position: 100% 80%：这里的第一个参数是水平定位值，设为100%代表把背景的右边缘和元素的右边缘对齐，当下划线从10%宽度往100%宽度增长时，就会从右侧开始向左铺开覆盖整个元素，实现反向展开的效果
可选微调：原来的120度渐变是对应从左展开的视觉方向，如果希望右侧起始的短线段也保持原有的渐变色彩层次，可以把linear-gradient的角度从120度调整为-120度，避免色彩在右侧位置出现视觉上的违和感

调整后的完整可用代码

.underline {
  background-image: linear-gradient(-120deg, #005720 0%, #003513 100%);
  background-repeat: no-repeat;
  background-size: 10% 0px;
  /* 核心反向定位修改 */
  background-position: 100% 80%;
  transition: background-size 0.25s ease-out;
}

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