CODEWITHSUNDEEP
csseffect
Emerald Junn Mendoza
Emerald Junn Mendoza

Reputation: 33

bottom-border hover transition

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

enter image description here

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

Upvotes: 1

Views: 2591

Answers (1)

Asons
Asons

Reputation: 87251

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>

Upvotes: 1

Related Questions