下边框悬停过渡

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>