css链接悬停动画如何实现_使用::after和transition控制下划线
答案是通过CSS的::after伪元素和transition属性实现链接悬停下划线展开动画，首先设置链接为relative定位，再利用::after创建初始宽度为0的下划线条，结合transition定义动画效果，当:hover触发时宽度变为100%，形成平滑展开的下划线，可调整left、transform等属性实现不同展开方式。
给链接添加悬停动画效果，可以通过 ::after 伪元素和 transition 实现平滑的下划线展开动画。这种方式视觉效果现代，常用于导航菜单或按钮链接中。
基本原理说明
使用 ::after 创建一个隐藏的下划线条，初始宽度为 0。当用户将鼠标悬停在链接上时，通过 CSS 的 transi
tion 属性让下划线平滑地扩展到完整宽度。
实现步骤
- 设置链接 position: relative，以便伪元素能相对于它定位
- 用 ::after 添加内容为空的伪元素，定位在文本底部
- 设置伪元素的初始 width: 0 和背景色
- 添加 transition 控制宽度变化的动画时长和缓动效果
- 在 :hover::after 中将宽度设为 100%，触发动画
可选增强效果
你可以调整 transition 的缓动函数，比如用 ease-in-out 让动画更柔和，或改变下划线颜色、高度、位置（如从中间向两边展开）来实现更多样式：.link::after {
left: 50%;
transform: translateX(-50%);
width: 0;
}
.link:hover::after {
width: 100%;
}
基本上就这些，不复杂但容易忽略细节。关键是控制好定位和过渡属性，就能做出流畅自然的悬停下划线动画。
