如何在悬停时创建漂亮的底部边框淡​​入淡出？

Question

当您将鼠标悬停在导航栏的项目上时，我想要 this website 。

我个人认为底部边框出现在悬停状态，但动画效果并不好。

Answer 1

尝试使用transition属性：

.your_element {
  transition: border-bottom 2s ease;
  border-bottom: solid 1px transparent;
}

.your_element:hover {
   border-bottom: solid 1px #000;
}

另请查看：https://css-tricks.com/almanac/properties/t/transition/