bottom-border hover transition

Question

Can any one tell me how to do a border-bottom hover effect from bottom to top?

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

Answer 1

Here is a simple sample using the pseudo element ::after

The advantage using this in favor of the border-bottom, it will not move the element up and down

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>