导航栏下划线问题源于未考虑文字基线与行高，应通过padding-bottom抬高border-bottom或用linear-gradient实现贴合自然的下划线，并预留空间防跳动。
导航栏下划线样式太生硬、颜色突兀、粗细不协调，或者 hover 时跳动、位置偏移——这些问题大多出在直接用 border-bottom 硬套，没考虑行高、字体基线和过渡细节。其实只要稍作调整，就能让下划线既美观又自然。
用 border-bottom 做「贴合文字」的下划线
默认 border-bottom 是紧贴元素底边的，而文字实际是按基线（baseline）对齐的，所以常显得太低、太重。关键在于：把下划线“抬高”到文字底部附近，并控制粗细与颜色透明度。
- 用
padding-bottom或line-height预留空间，再用border-bottom定位 - 推荐写法：
a {
border-bottom: 2px solid #007bff;
box-sizing: border-box;
padding-bottom: 4px; /* 把下划线托起来 */
transition: border-color 0.3s;
}
a:hover { border-color: #0056b3; } - 避免写
height或固定line-height过小，否则会裁切文字降部（如 g、y、q）
用 linear-gradient 实现渐变/虚线/双色下划线
当需要更灵活的视觉效果（比如从左到右渐变、中间高亮、虚线下划线），background-image: linear-gradient() 比 border 更可控，且不影响盒模型。
- 基础渐变下划线（1px 高，居底）：
a {
background-image: linear-gradient(to right, #007bff, #0056b3);
background-position: bottom center;
background-size: 0 2px;
background-repeat: no-repeat;
transition: background-size 0.3s;
}
a:hover { background-size: 100% 2px; } -
background-size: 0 2px表示初始宽度为 0（隐藏），hover 时展开成 100% - 支持多色、角度、甚至加
background-image: repeating-linear-gradient()做虚线效果
防跳动 & 更顺滑的 hover 效果
下划线出现时内容“上跳”，是因为加了 border 或 background 后高度变化。解决思路是：预留空间 + 使用 transform 或 opacity 过渡。
立即学习“前端免费学习笔记（深入）”；
- 方案一（推荐）：用
padding-bottom预留空间，border 始终存在，只改颜色或宽度 - 方案二：用
transform: scaleX(0)+origin控制伸缩方向，完全不占布局空间
a::after {
content: '';
display: block;
height: 2px;
background: #007bff;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
a:hover::after { transform: scaleX(1); } - 避免同时改
border-width（如 0→2px），这是跳动主因
基本上就这些。border-bottom 简单直接，适合多数场景；linear-gradient 更自由，适合设计感强的项目。关键是理解文字排版逻辑，而不是堆属性。试几次，你就能一眼看出哪条线“长在字上”，哪条线“浮在空中”了。
