答案：通过 css 伪元素 ::after 结合transform 和transition实现导航栏下划线动画，1. 使用 flex 布局构建横向导航；2. 设置 a 标签 相对定位；3. 利用：:after 创建初始宽度为 0 的下划线；4. hover 时宽度变为 100%，配合 transition 实现滑动效果；5. 通过 left 和 transform 控制展开方向，如居中展开需设置 left:50% 和 translateX(-50%)。
实现导航栏下划线动画，可以通过 CSS 的 伪元素（如 ::after 或 ::before）结合 transform 和 transition 来完成。点击或悬停时，下划线从一侧滑动出现，视觉效果流畅自然。
1. 基本 html 结构
假设导航栏由一个无序列表构成：
<nav> <ul class="nav-list"> <li><a href="#"> 首页 </a></li> <li><a href="#"> 关于 </a></li> <li><a href="#"> 服务 </a></li> <li><a href="#"> 联系 </a></li> </ul> </nav>
2. 基础样式设置
先给导航基本样式，隐藏默认列表符号，横向 排列：
.nav-list {list-style: none; display: flex; gap: 40px; padding: 20px; background: #f8f8f8;} .nav-list a {text-decoration: none; color: #333; font-size: 16px; position: relative; padding: 10px 0;}
3. 添加下划线动画效果
使用 ::after 伪元素创建下划线，初始状态隐藏，悬停时滑出：
立即学习 “ 前端免费学习笔记（深入）”；
.nav-list a::after {content: ''; position: absolute; left: 0; bottom: 5px; width: 0; height: 2px; background-color: #007acc; transition: width 0.3s ease, left 0.3s ease;} .nav-list a:hover::after {width: 100%;}
这样，鼠标移到链接上时，下划线会从左向右伸展。
4. 进阶：居中向两边展开
如果想让下划线从中部向左右两侧展开，调整伪元素的起点和 transform：
.nav-list a::after {content: ''; position: absolute; left: 50%; bottom: 5px; width: 0; height: 2px; background-color: #007acc; transition: width 0.3s ease, left 0.3s ease; transform: translateX(-50%); } .nav-list a:hover::after {width: 100%; left: 0;}
利用 transform: translateX(-50%) 将下划线中心对齐，悬停时宽度撑满，视觉上就是从中向两边展开。
基本上就这些。通过控制伪元素的宽、位置和过渡效果，就能做出各种风格的下划线动画，不复杂但容易忽略细节。比如确保父元素是 相对定位，伪元素才能准确定位。
