使用CSS ::after伪元素和transition实现悬停下划线动画。1. 构建导航结构；2. 设置链接基础样式；3. 添加::after伪元素并定义宽度过渡；4. 通过hover触发width:100%实现展开效果，支持左右或居中动画，流畅且兼容性强。
要实现导航菜单在悬停时出现下划线动画效果，可以使用 CSS 的 ::after 伪元素结合 transition 控制宽度变化。这种方式视觉流畅，适合现代网页设计。
1. 基础结构：HTML 菜单
先构建一个简单的导航结构：
2. 设置基础样式
为导航链接设置基本样式，隐藏默认下划线，定位伪元素：
.menu a {
text-decoration: none;
color: #333;
padding: 10px 15px;
position: relative;
display: inline-block;
}
3. 使用 ::after 创建下划线
通过 ::after 在每个链接下方添加一条窄线，并设置过渡动画：
立即学习“前端免费学习笔记（深入）”；
.menu a::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: #007acc;
transition: width 0.3s ease;
}
.menu a:hover::after {
width: 100%;
}
这样，鼠标移上时，下划线会从左向右伸展出来。
4. 可选优化：居中展开动画
如果希望下划线从中间向两边展开，可以调整伪元素的初始状态：
.menu a::after {
left: 50%;
transform: translateX(-50%);
width: 0;
}
.menu a:hover::after {
width: 100%;
}
利用 transform 实现中心对齐扩展，视觉更优雅。
基本上就这些。使用 ::after 和 transition 控制 width，就能轻松做出平滑的悬停下划线动画，不依赖 JavaScript，性能好，兼容性也强。
