底部边框悬停过渡

Question

谁能告诉我如何做一个 border-bottom 从下到上的悬停效果？

来源：http://www.sony.com/electronics/playstation

Answer 1

这是一个使用 pseudo 元素的简单示例 ::after

使用这个有利于border-bottom的优点，它不会上下移动元素

a {
  position: relative;
  padding: 10px 20px;
}
a::after {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 0;
  background: blue;
  transition: height 0.3s;
}
a:hover::after {
  height: 5px;
  transition: height 0.3s;
}

a + a::after {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 5px;
  background: blue;
  transition: width 0.3s;
}

a + a:hover::after {
  width: 100%;
  transition: width 0.3s;
}

<a> Hover me </a> <a> Hover me 2 </a>

底部边框悬停过渡

bottom-border hover transition

css

effect