答案：通过设置a标签相对定位并移除默认下划线，利用::after伪元素创建可动画的自定义下划线，悬停时通过width从0到100%实现伸展效果，结合transition控制动画节奏，可进一步定制颜色、位置和展开方式以获得更精致的视觉表现。
想要自定义CSS链接悬停时的下划线样式，使用 ::after 伪元素结合 content 和 transition 是一种灵活且视觉效果出色的方法。这种方法可以让你完全控制下划线的长度、颜色、位置、动画等，而不是依赖浏览器默认的 text-decoration: underline。
为了让 ::after 伪元素正确工作，需要先将链接设为相对定位，并清除默认的下划线。
a {
text-decoration: none;
color: #007acc;
position: relative;
}
通过 ::after 插入一个伪元素作为下划线，默认隐藏或缩小，悬停时展开。
a::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background-color: #007acc;
transition: width 0.3s ease;
}
当鼠标悬停时，将伪元素的宽度设为100%，实现下划线展开动画。
立即学习“前端免费学习笔记（深入）”；
a:hover::after {
width: 100%;
}
你可以进一步美化效果：
background: linear-gradient(...)
ease-in-out 或 cubic-bezier(.4,0,.2,1)
left: 50% + transform: translateX(-50%)，再配合 width 变化以上就是css链接悬停下划线样式如何自定义_使用::after结合content和transition的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
497
收藏
