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 vote194 views1 answer
CSS BODY AND PRE
CSS
0 vote236 views1 answer
Css hot to center image in bootsrtap container
CSS
7 votes202 views3 answers
Input checked by default
CSS
2 votes220 views2 answers
Stop process id powershell
CSS
0 vote227 views1 answer
Have unordered list horizontal css
CSS
2 votes184 views5 answers
Figma
CSS
15 votes237 views3 answers
Put an border around an text in css
CSS
3 votes156 views1 answer
Ttf css
CSS
0 vote207 views1 answer
Align links to right css
CSS
0 vote302 views1 answer
ProgressBars bulma -- thickness
CSS Bulma