如何将链接下划线动画到链接的宽度，而不是ul？

要将链接下划线动画到链接的宽度，而不是ul，可以通过CSS的伪元素和过渡效果来实现。

首先，给链接添加一个父元素，例如一个<span>标签，用于包裹链接文本。然后，使用CSS的伪元素::after来创建一个下划线，并设置其初始状态为与链接文本宽度相同。

接下来，通过CSS的过渡效果来实现下划线的动画效果。当鼠标悬停在链接上时，通过改变伪元素的宽度，将下划线动画到链接的宽度。

以下是一个示例的CSS代码：

a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

a span {
  position: relative;
  display: inline-block;
}

a span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000; /* 下划线颜色 */
  transform: scaleX(0); /* 初始状态下划线宽度为0 */
  transition: transform 0.3s ease; /* 过渡效果 */
}

a:hover span::after {
  transform: scaleX(1); /* 鼠标悬停时下划线宽度为链接宽度 */
}

在上述代码中，我们使用了<a>标签作为链接，使用<span>标签作为链接文本的父元素。通过设置position: relative和display: inline-block来保证链接和文本在同一行显示。

然后，使用::after伪元素来创建下划线，并设置其初始状态为与链接文本宽度相同。通过设置position: absolute、bottom: 0和left: 0将下划线定位在链接文本的底部。

接着，通过设置transform: scaleX(0)将下划线的宽度初始化为0，使用transition属性设置过渡效果，使下划线的宽度在0.3秒内平滑变化。

最后，通过设置a:hover span::after选择器，当鼠标悬停在链接上时，将下划线的宽度通过transform: scaleX(1)动画到链接的宽度。

这样，当鼠标悬停在链接上时，下划线将从链接文本的起始位置逐渐扩展到链接的宽度，实现了将下划线动画到链接的宽度的效果。

请注意，以上示例中的代码只是一种实现方式，具体的实现方式可能因项目需求和具体情况而有所不同。