答案是利用伪元素和css的transform与transition实现导航栏下划线过渡。首先构建导航html结构，设置flex布局与链接样式，再通过::after创建绝对定位的下划线，初始宽度为0，配合transition定义动画时长与函数，hover时宽度变为100%或使用scaleX从中心展开，实现平滑过渡效果。
实现导航栏下划线过渡效果，关键在于利用伪元素和CSS的transform与transition属性。这种方式既美观又性能良好。
1. 基本HTML结构
先构建一个简单的导航结构：
<nav class="navbar"> <a href="#" class="nav-link">首页</a> <a href="#" class="nav-link">关于</a> <a href="#" class="nav-link">服务</a> <a href="#" class="nav-link">联系</a> </nav>
2. 设置基础样式
给导航链接设置基本样式，隐藏默认下划线，定位伪元素：
.navbar { display: flex; gap: 30px; padding: 20px; background: #fff; } .nav-link { text-decoration: none; color: #333; position: relative; padding: 10px 0; }
3. 添加下划线伪元素
使用::after创建下划线，并设置过渡动画：
立即学习“前端免费学习笔记（深入）”；
.nav-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: #007bff; transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; }
4. 可选：更平滑的居中展开效果
如果想让下划线从中间向两边展开，可以调整伪元素的起点和变换原点：
.nav-link::after { left: 50%; transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform 0.3s ease; } .nav-link:hover::after { transform: translateX(-50%) scaleX(1); }
这种方法使用scaleX控制宽度变化，视觉上更流畅，且避免重绘。
基本上就这些，核心是伪元素 + 过渡控制。不复杂但容易忽略细节。