答案是通过CSS的::after伪元素和transition属性实现链接悬停下划线展开动画，首先设置链接为relative定位，再利用::after创建初始宽度为0的下划线条，结合transition定义动画效果，当:hover触发时宽度变为100%，形成平滑展开的下划线，可调整left、transform等属性实现不同展开方式。

给链接添加悬停动画效果，可以通过 ::after 伪元素和 transition 实现平滑的下划线展开动画。这种方式视觉效果现代，常用于导航菜单或按钮链接中。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

基本原理说明

使用 ::after 创建一个隐藏的下划线条，初始宽度为 0。当用户将鼠标悬停在链接上时，通过 CSS 的 transition 属性让下划线平滑地扩展到完整宽度。

实现步骤

• 设置链接 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%;
}

基本上就这些，不复杂但容易忽略细节。关键是控制好定位和过渡属性，就能做出流畅自然的悬停下划线动画。