Underline css animation hover

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

Source: 30secondsofcode.org

Similar codes

0 vote137 views1 answer
SES
CSS
1 vote123 views1 answer
Why is my css code not working
CSS
2 votes114 views1 answer
Minimum margin css
CSS
0 vote127 views2 answers
Remove unused css styles
CSS
32 votes134 views6 answers
Animations css
CSS
0 vote121 views1 answer
Progress bar bootstrap border
CSS
0 vote123 views1 answer
Html css how to arrange images of different sizes
CSS
0 vote133 views1 answer
Css horizontal scroll cards
CSS
1 vote122 views1 answer
How do you display a border like this:
CSS
0 vote129 views1 answer
How to center an overlay button using flex box
CSS