答案：通过设置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 插入一个伪元素作为下划线，默认隐藏或缩小，悬停时展开。
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 变化 - 添加延迟或颜色渐变过渡
