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 vote153 views1 answer
The CSS to make all the columns equal in width is as follows
CSS
2 votes138 views1 answer
White space in css
CSS
50 votes134 views3 answers
Simple css reset
CSS
3 votes152 views1 answer
What is a pseudo selector?
CSS
67 votes148 views6 answers
Media query in css
CSS
0 vote138 views1 answer
Working with tailwind css on your react build
CSS
0 vote137 views1 answer
Javafx css rectangle outline
CSS
118 votes219 views6 answers
Css @media
CSS
23 votes138 views3 answers
Text-overflow ellipsis multiple lines
CSS
0 vote144 views1 answer
Check concurrent connections for linux user
CSS