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

3 votes370 views2 answers
Antialiasing css
CSS
1 vote351 views1 answer
How to change button gradient
CSS
0 vote380 views1 answer
Estilos de button css
CSS
1 vote409 views1 answer
Uibutton image
CSS
1 vote379 views2 answers
Css scroll y showing scroll bar
CSS
4 votes351 views2 answers
Bootstrap icons sdn
CSS
0 vote359 views1 answer
Css a tag id selector scrolls too far
CSS
1 vote382 views1 answer
Place-items css property
CSS
0 vote386 views1 answer
Navbar css code
CSS
200 votes574 views6 answers
Background image
CSS