伪元素::after实现导航下划线动画必须设置position: absolute及父级position: relative，配合transform: scaleX()和transition，同时兼容:hover/:focus/:active状态。
伪元素 ::after 必须配合 position: absolute 定位
直接给导航链接加 ::after 会脱离文档流，不设置定位会导致下划线位置飘移或完全不可见。必须确保父级 或 有 position: relative，否则 ::after 的 left/bottom 坐标无参照。
常见错误是只写了 ::after { content: ''; width: 100%; height: 2px; background: #007bff; }，但没加定位和父级相对定位，结果动画压根不出现。
- 父容器（如
）需显式声明position: relative -
::after必须含position: absolute、bottom: 0、left: 0 -
content: ''不可省略，否则伪元素不渲染
动画要用 transform: scaleX() 而非 width
用 width 动画会触发重排（reflow），性能差，尤其在移动端易卡顿；transform: scaleX() 只触发重绘（repaint），GPU 加速更顺滑。
Bootstrap 5 默认的 .nav-link 是行内元素，width 对其无效，强行设宽还可能撑开布局——这是很多人调不出动画的根源。
- 初始状态：
::after { transform: scaleX(0); transform-origin: left center; } - 悬停状态：
&:hover::after { transform: scaleX(1); } - 必须加
transition: transform 0.3s ease，不能写成transition: all 0.3s
Bootstrap 5 的 .navbar-nav > li > a 结构要小心选择器权重
Bootstrap 5 的导航项结构是 ，伪元素要作用在 .nav-link 上，但默认样式里 .nav-link 没有 position: relative，得手动覆盖。
如果用 .navbar-nav li a::after 写法，容易被 Bootstrap 的高权重规则（如 .navbar-nav .nav-link:hover）干扰，导致悬停时下划线一闪而过或不触发。
- 推荐直接给
.nav-link加类或用!important确保position: relative - 避免用
body .navbar-nav a::after这类过度具体的选择器，维护性差 - 若项目已用 Sass，可在
_custom.scss中扩展.nav-link：
.nav-link {
position: relative;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #007bff;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s ease;
}
&:hover::after {
transform: scaleX(1);
}
}
移动端点击反馈缺失？补上 :focus 和 :active
纯 :hover 在触摸设备上无效，用户点一下就没了动画，体验断裂。必须同时覆盖 :focus（键盘焦点）和 :active（触摸按下态）。
尤其当导航项支持键盘操作（无障碍需求）或混合设备访问时，漏掉这两个状态会让下划线“只对鼠标有效”，测试时容易忽略。
- 把悬停样式复制到
&:hover::after, &:focus::after, &:active::after -
:focus需配合outline: none（但要保留其他焦点可见方案，比如加边框） - 注意 Safari 在 iOS 上对
:active的延迟处理，可加-webkit-tap-highlight-color: transparent优化响应
下划线动画看着简单，真正落地时最常卡在定位失效和移动端交互断层这两处。别假设浏览器会自动推导坐标，也别只盯着鼠标行为测效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
