直接给.dropdown-item加::after动画没反应，根本原因是未设position: relative导致伪元素定位错乱、padding裁剪及transform-origin缺失；须同时设置relative定位、::after基础样式和transform-origin。
为什么直接给 .dropdown-item 加 ::after 动画没反应
常见现象是写了 ::after 样式但下划线根本不出现，或者只闪一下就消失。根本原因是：.dropdown-item 默认是 display: block，但没设 position: relative，导致 ::after 的 position: absolute 会相对于 body 定位，而不是贴着文字底部；另外 Bootstrap 4 的 .dropdown-menu 有 padding: .5rem 0，容易让伪元素偏移或被裁剪。
必须加的定位和基础样式
要让滑动下划线稳定贴在文字下方，这三步缺一不可：
-
.dropdown-item必须显式设置position: relative -
::after必须含content: ''、position: absolute、bottom: 0、left: 0、width: 100%、height: 2px -
::after的transform: scaleX(0)初始状态要配合transform-origin: left center，否则缩放中心偏移
transform: scaleX() 比 width 动画更可靠
用 width: 0 → width: 100% 会触发 layout（重排），尤其在 .dropdown-menu 这种浮动容器里容易抖动或错位；而 transform: scaleX(0) → scaleX(1) 只触发 repaint（重绘），GPU 加速更顺滑，且不会影响布局流。
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
.dropdown-item {
position: relative;
}
.dropdown-item::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;
}
.dropdown-item:hover::after {
transform: scaleX(1);
}
移动端点击时下划线不触发？不是 bug，是预期行为
iOS 和 Android 上 :hover 仅在长按模拟悬停时短暂生效，且不冒泡到子元素。这意味着你点开一级菜单后，再点二级项，:hover 状态极不稳定，下划线大概率不显示或闪退。
- 纯 CSS 方案只适用于桌面端 hover 场景
- 若需在移动端也保持视觉反馈，得改用 JS 监听
click并切换自定义类（如.active-underline），再配对应 CSS - 别试图用
@media (hover: hover)来“修复”——它只能判断设备能力，不能改变触发逻辑
最易被忽略的是 .dropdown-item 缺少 position: relative 和 ::after 没设 transform-origin：DOM 存在，但下划线渲染在屏幕外或缩成一个点，调试时容易误判为样式没加载。
