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 vote139 views1 answer
Javafx css rectangle outline
CSS
0 vote136 views1 answer
Z index div over cursor
CSS
1 vote149 views1 answer
Bootstrap card hover effect
CSS
1 vote266 views1 answer
Css minifier api
CSS
0 vote165 views1 answer
Css how to remove underline from visited sites
CSS
0 vote141 views1 answer
How to make my list unstyled
CSS
0 vote142 views2 answers
Codeigniter return last inserted id
CSS
6 votes136 views4 answers
Change border highlight color on an input text element
CSS
0 vote141 views1 answer
CSS class inheritance
CSS
55 votes221 views6 answers
Css margin
CSS