答案：通过设置a标签相对定位并移除默认下划线，利用::after伪元素创建可动画的自定义下划线，悬停时通过width从0到100%实现伸展效果，结合transition控制动画节奏，可进一步定制颜色、位置和展开方式以获得更精致的视觉表现。

想要自定义CSS链接悬停时的下划线样式，使用 ::after 伪元素结合 content 和 transition 是一种灵活且视觉效果出色的方法。这种方法可以让你完全控制下划线的长度、颜色、位置、动画等，而不是依赖浏览器默认的 text-decoration: underline。

1. 基础结构：移除默认下划线，设置相对定位

为了让 ::after 伪元素正确工作，需要先将链接设为相对定位，并清除默认的下划线。

a {
  text-decoration: none;
  color: #007acc;
  position: relative;
}

2. 使用 ::after 创建自定义下划线

通过 ::after 插入一个伪元素作为下划线，默认隐藏或缩小，悬停时展开。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #007acc;
  transition: width 0.3s ease;
}

• content: ''：必须存在，否则 ::after 不会显示
• bottom: -2px：控制下划线距离文字的位置
• width: 0：初始状态下无宽度，实现“伸展”动画
• transition：添加平滑过渡效果

3. 悬停时显示完整下划线

当鼠标悬停时，将伪元素的宽度设为100%，实现下划线展开动画。

立即学习“前端免费学习笔记（深入）”；

a:hover::after {
  width: 100%;
}

4. 进阶样式建议

你可以进一步美化效果：

• 改变下划线颜色：background: linear-gradient(...)
• 调整动画缓动：ease-in-out 或 cubic-bezier(.4,0,.2,1)
• 从中心向两边展开：left: 50% + transform: translateX(-50%)，再配合 width 变化
• 添加延迟或颜色渐变过渡

基本上就这些，用 ::after 的方式比 text-decoration 更可控，适合追求细节的网页设计。