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

-1 vote249 views2 answers
Bootstrap 4 popover content from div
CSS
0 vote240 views1 answer
Css button no style
CSS
0 vote255 views1 answer
Datatables when filtering snaps to top of page
CSS
0 vote228 views1 answer
How to change textsize recta native
CSS
20 votes274 views3 answers
Align items center in grid
CSS
6 votes232 views3 answers
How to round input border
CSS
0 vote233 views1 answer
How to stretch picture with website css
CSS
7 votes245 views2 answers
Make images same size css
CSS
0 vote259 views1 answer
Can i do an onclick menu with css alone
CSS
50 votes214 views5 answers
Child css
CSS