答案：通过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 伪元素创建下划线，初始状态隐藏，悬停时滑出：
立即学习“前端免费学习笔记（深入）”；
来画数字人直播
0
来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。
0
查看详情
.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%) 将下划线中心对齐，悬停时宽度撑满，视觉上就是从中向两边展开。
基本上就这些。通过控制伪元素的宽、位置和过渡效果，就能做出各种风格的下划线动画，不复杂但容易忽略细节。比如确保父元素是相对定位，伪元素才能准确定位。
相关标签：
css html 伪元素 flex布局 排列 a标签 相对定位 css html 伪元素 transform transition flex
大家都在看：
在css中实现多列新闻列表布局
在css中CSS Grid与框架结合使用
css引入方式外部与内部区别如何选择
在css中如何使用@import引入样式
在css中使用框架减少重复CSS代码
在css中CSS Grid与框架结合使用
css引入方式外部与内部区别如何选择
在css中如何使用@import引入样式
在css中使用框架减少重复CSS代码
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容