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

2 votes98 views3 answers
Css media screen
CSS
0 vote98 views1 answer
Css cursor finger
CSS
0 vote137 views1 answer
Bootstrap-navbar-brand
CSS Bootstrap
0 vote96 views1 answer
Css pixel art
CSS
0 vote153 views1 answer
Css locks
CSS
0 vote125 views1 answer
Barra de rolagem vertical css
CSS
69 votes102 views6 answers
Center image css
CSS
39 votes111 views6 answers
Css first child
CSS
25 votes97 views8 answers
Background image with gradient css
CSS
0 vote99 views1 answer
In flex-wrap remove last item margin for every row
CSS