单靠 :hover 无法实现下滑线动画，因为它只是状态开关，不控制位置或形状；真正动画需通过 ::after 伪元素配合 transform 或 top + transition 实现，且必须设置 content: ""、position: relative 和 transition 属性。
直接用 :hover 无法实现“下滑线”动画——它只能触发状态，真正要动的是 ::after 伪元素 + transform 或 top + transition。
为什么单靠 :hover 不行？
:hover 本身不控制位置或形状，它只是个状态开关。下滑线本质是：默认隐藏在文字下方、悬停时从顶部滑下（或从底部上浮）、覆盖文字底部边缘。这需要一个可定位的视觉载体，比如 ::after。
常见错误现象：
- 写了 a:hover::after { height: 2px; } 但没设 content: "" → 伪元素不渲染
- 忘了给父级 a 设 position: relative → ::after 脱离定位上下文，飘到页面左上角
- 没加 transition → 线条“啪”一下闪现，没有滑动效果
基础实现：用 ::after + transform 滑入
这是最稳、性能最好的写法，避免重排，只触发布局和绘制。
- 给导航链接设
position: relative -
::after设成绝对定位，宽100%、高2px、背景色，top: 100%（紧贴文字底边下方） - 初始
transform: translateY(-100%)→ 完全藏在文字上方 -
a:hover::after改为transform: translateY(0)→ 滑落到目标位置 - 必须加
transition: transform 0.3s ease，否则无动画
nav a {
position: relative;
text-decoration: none;
}
nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #007bff;
transform: translateY(-100%);
transition: transform 0.3s ease;
}
nav a:hover::after {
transform: translateY(0);
}兼容旧浏览器？改用 top + transition
如果项目还要支持 IE10/11，transform 动画可能有闪烁或兼容问题，此时换用 top 更稳妥。
立即学习“前端免费学习笔记（深入）”；
-
::after初始设top: -2px（即线高2px，刚好藏在文字正上方） -
a:hover::after设top: 100%→ 下滑到底边位置 - 注意：必须同时设
top和transition: top 0.3s ease - 这个方案会触发重排，小范围使用影响不大，但别在滚动密集区域滥用
nav a::after {
/* ...其他同上 */
top: -2px;
transition: top 0.3s ease;
}
nav a:hover::after {
top: 100%;
}容易被忽略的细节
下滑线看着简单，实际线上常崩在这些地方：
- 导航项用了
display: inline-block或flex，但没给a设height或line-height→100%计算基准错乱，线位置飘移 - 字体用了
font-size: 1.2em或响应式单位，bottom: 0在不同尺寸下对不齐 → 建议统一用bottom: 0+height固定，别依赖文字高度 - 多个导航项共用同一套样式，但某一项加了
padding-bottom→ 线条下沉过头，需重置该a的padding-bottom: 0 - 动画时间设成
0.1s→ 太快像抖动；设成0.6s→ 用户手都移开了线还在动
真正卡住人的，往往不是怎么写，而是 position: relative 漏了、content: "" 忘了、或者过渡属性写在了 ::after 外面。
