html - CSS : Border bottom transition issue

Question

我尝试了 CSS 动画在悬停时将 border-bottom 从上到下移动。但是当我将光标放在边框的底部边缘时，它开始闪烁并且光标和边框不断变化。

这里是 JSFIDDLE

div {
  border-bottom: 1px solid;
  display: inline;
  padding-bottom: 5px;
  transition: padding-bottom .5s;
}

div:hover {
  padding-bottom: 2px;
  cursor: pointer;
  transition: padding-bottom .5s;
}

<div>
  Hello world
</div>

有没有办法解决闪烁问题或任何其他获得相同动画效果的方法。

Answer 1

使用另一个元素，给外部元素一个固定的高度，并在悬停时使内部元素变小。我添加了背景颜色以显示正在发生的事情:

div{
  display: inline-block;
  cursor: pointer;
  height: 28px; /* lineheight+border+padding */
  background: red;
}

div >span{
  border-bottom: 1px solid;
  display: inline-block;
  padding-bottom: 5px;
  transition: padding-bottom .5s;
  line-height: 22px;
  background: yellow;
}

div:hover span{
  padding-bottom: 2px;
  transition: padding-bottom .5s;
}

<div>
  <span>Hello World</span>
</div>