底部边界悬停过渡

Question

任何人都可以告诉我如何从下到上执行border-bottom悬停效果？

Src：http://www.sony.com/electronics/playstation

Answer 1

以下是使用pseudo元素::after

的简单示例

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;