CSS border-bottom过渡闪烁问题及解决方法咨询

这个闪烁问题的根源很直观：你通过修改padding-bottom来移动边框，而padding是元素盒模型的一部分——当hover状态改变padding-bottom时，元素的可交互区域（也就是浏览器检测光标是否在元素内的范围）会跟着缩小。光标本来在元素底部边缘，元素一缩小，光标就“跑”到元素外面了，于是hover状态取消，padding-bottom又变回原来的值，元素范围又扩大，光标重新进入hover范围……如此循环往复，就出现了闪烁。

下面给你两种可靠的解决方法，都能避免这个问题：

方法一：用伪元素实现边框动画（推荐） #

这种方法不会改变元素本身的尺寸，hover检测范围全程稳定，从根源上解决闪烁问题。我们用::after伪元素模拟底部边框，通过移动伪元素的位置来实现动画：

div {
  position: relative;
  display: inline-block; /* 比inline更易控制定位，避免inline元素的一些奇怪行为 */
  padding-bottom: 5px; /* 保持初始的内边距，让元素范围固定 */
}

div::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 5px; /* 初始位置和原边框一致 */
  width: 100%;
  height: 1px;
  background-color: currentColor; /* 继承文字颜色，和原border效果一致 */
  transition: bottom 0.5s ease; /* 动画过渡 */
}

div:hover::after {
  bottom: 2px; /* 上移边框，对应你原来的padding变化幅度 */
  cursor: pointer;
}

<div>Hello world</div>

方法二：用父元素固定hover范围 #

如果不想用伪元素，也可以给目标元素套一个父容器，让父容器的尺寸固定，hover事件绑定在父容器上，这样即使子元素的padding变化，也不会影响hover检测的范围：

<div class="hover-wrapper">
  <span>Hello world</span>
</div>

.hover-wrapper {
  display: inline-block;
  padding-bottom: 5px; /* 固定父容器的底部内边距，保持hover范围不变 */
}

.hover-wrapper span {
  display: inline-block;
  border-bottom: 1px solid;
  padding-bottom: 0;
  transition: padding-bottom 0.5s ease;
}

.hover-wrapper:hover span {
  padding-bottom: 3px; /* 通过增加内边距让边框上移，和原效果一致 */
  cursor: pointer;
}

两种方法都能实现你想要的“边框由上至下移动”的动画，且不会出现闪烁问题。其中伪元素的方法更简洁，不需要额外的HTML结构，是更推荐的方案。

内容的提问来源于stack exchange，提问作者shubham agrawal