使用 Flexbox 布局结合伪元素实现导航栏下划线动画：1. 用 display: flex 排列导航项；2. 通过 ::after 创建隐藏下划线，hover 时 width 从 0 放大至 100%；3. 可选居中对齐或中间展开动画，关键在于定位与过渡控制。
在 CSS 中使用 Flexbox 制作导航栏下划线动画，可以通过 flex 布局控制导航项排列，再结合 :hover 和 伪元素实现平滑的下划线动画效果。下面是具体实现方法。
1. 使用 Flex 布局搭建导航结构
先用 Flex 让导航项水平排列，并设置基本样式。
CSS 设置 Flex 布局：
.navbar {
display: flex;
gap: 2rem;
padding: 1rem;
}
.nav-link {
position: relative;
text-decoration: none;
color: #000;
font-size: 1rem;
}
2. 添加下划线动画伪元素
使用 ::after 伪元素作为下划线，默认隐藏，在 hover 时显示并扩展。
立即学习“前端免费学习笔记（深入）”；
九歌
九歌–人工智能诗歌写作系统
322 查看详情 .nav-link::after {
content: ”;
position: absolute;
width: 0;
height: 2px;
background-color: #007bff;
left: 0;
bottom: -4px;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
3. 可选：居中对齐或更复杂的动画
如果希望导航居中，可以在容器上加：
.navbar {
justify-content: center;
}
也可以让下划线从中间向两边展开：
.nav-link::after {
left: 50%;
transform: translateX(-50%);
width: 0;
}
.nav-link:hover::after {
width: 100%;
transform: translateX(-50%) scaleX(1);
}
基本上就这些。通过 Flex 布局管理导航结构，再用伪元素和过渡动画实现动态下划线，简洁又现代。不复杂但容易忽略细节，比如定位和初始状态控制。
以上就是在css中如何用flex制作导航栏下划线动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1032283.html
微信扫一扫 
支付宝扫一扫 
