Underline css animation

Text underline hover css

a:hover {
  text-decoration: underline;
}

Underline css animation

.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

Add expanding underline on page load css

#sec {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}
#sec:after {
  content: '';
  display: block;
  margin: auto;
  height: 3px;
  width: 0px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
#sec:hover:after {
  width: 100%;
  background: blue;
}

Source: stackoverflow.com

Similar codes

11 votes382 views1 answer
Css white-space nowrap
CSS
7 votes394 views3 answers
Change font awesome icon color
CSS
2 votes651 views1 answer
Css last element with class name
CSS
0 vote383 views1 answer
-webki slider runnable track
CSS
12 votes360 views4 answers
Sticky header
CSS
93 votes399 views6 answers
Css center image in div
CSS
13 votes375 views6 answers
Bootstrap Badges
CSS
52 votes346 views4 answers
Css change text size
CSS
0 vote352 views2 answers
Write mode css
CSS
9 votes395 views2 answers
Bootstrap cheat sheet
CSS