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

22 votes365 views2 answers
React bootstrap carousal not working
CSS
0 vote390 views1 answer
P{ color: blue; font-size: 14px; }
CSS
0 vote408 views6 answers
Css change svg color
CSS
1 vote373 views1 answer
Gulp with pm2
CSS
8 votes402 views3 answers
Css darkmode
CSS
0 vote371 views1 answer
Every user on your website has an image avatar that is displayed when
CSS
-1 vote447 views1 answer
Bootstrap scrollable modal
CSS Bootstrap
0 vote354 views1 answer
Scroll x css
CSS
17 votes367 views3 answers
Css odd even child
CSS
60 votes342 views3 answers
Adding shadow to a div
CSS