多行链接悬停动画与下划线偏移调整问题

核心问题是background-position: left bottom -5px的写法无效——负数偏移会让下划线跑到元素外部，自然看不到。要让background实现的下划线和text-underline-offset:5px对齐，需要调整垂直位置的计算方式，同时统一下划线厚度确保视觉一致。

完整实现代码 #

<a href="#" class="animated-link">我是带动画的链接</a>

.animated-link {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px; /* 和hover状态下划线厚度统一 */
  color: #333;
  text-decoration-color: #333;
}

.animated-link:hover {
  text-decoration: none;
  /* 用calc(100% - 5px)设置垂直位置，匹配text-underline-offset的5px偏移 */
  background: linear-gradient(currentColor, currentColor) left calc(100% - 5px) / 0 2px no-repeat;
  transition: background-size 0.3s ease;
}

.animated-link:hover {
  background-size: 100% 2px;
}

关键说明 #

1. 统一厚度：设置text-decoration-thickness和background渐变的高度（2px）一致，避免hover前后下划线粗细变化。
2. 正确偏移计算：用calc(100% - 5px)作为垂直位置，让下划线位于元素底部往上5px的位置，刚好和默认text-underline-offset:5px的视觉位置对齐。
3. 动画逻辑：初始background-size宽度为0，hover时过渡到100%，实现左侧滑入效果。

备选方案（伪元素实现，更灵活） #

如果background方案仍有适配问题，用伪元素可以更精准控制位置：

.animated-link {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  position: relative;
}

.animated-link:hover {
  text-decoration: none;
}

.animated-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 5px; /* 直接设置偏移量，和text-underline-offset一致 */
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease;
}

.animated-link:hover::after {
  width: 100%;
}

这个伪元素方案直接通过bottom:5px匹配偏移，逻辑更直观，也不会受元素padding等属性影响。

内容的提问来源于stack exchange，提问作者Meek