How to Animate Underline from Left to Right

How to animate underline from left to right?

You can use gradient and adjust background-position with a delay to obtain such effect:

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: 0 100%; /*OR bottom left*/
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/
}

.un:hover {
  background-position: 100% 100%; /*OR bottom right*/
  background-size: 100% 2px;
}

<span class="un">Underlined Text</span>

Underline from left to right on hover in and out

You can try animating the width instead of the right/left properties.

.underline {  display: inline;  position: relative;  overflow: hidden;}.underline:after {  content: "";  position: absolute;  z-index: -1;  right: 0;  width: 0;  bottom: -5px;  background: #000;  height: 4px;  transition-property: width;  transition-duration: 0.3s;  transition-timing-function: ease-out;}.underline:hover:after,.underline:focus:after,.underline:active:after {  left: 0;  right: auto;  width: 100%;}

<p>hello, link is <a href="#" class="underline">underline</a></p>

Text Underline Animation Left to Right

Make some changes to your css:

.navlist:after {
    ...
    float: right; /* Add this line */
}

.navlist:hover:after {
    ...
    float: left; /* Add this line */
}

Demo: http://jsfiddle.net/2tycjc82/2/

But as I commented. There's a not-so-nice result when user hover in then immediately hover out.

Css animation to remove then add back text underline

You can do this with a background animation:

.link-underline{
  --n:4; /* adjust this to control the delay */

  text-decoration:none;
  display:inline-block;
  background:
    linear-gradient(to right,
       #000          calc(100%/var(--n)),
       transparent 0 calc((var(--n) - 1)*100%/var(--n)),
       #000 0) 
    bottom right/
    calc(var(--n)*100%) 1px 
    no-repeat;
}
.link-underline:hover {
  background-position:bottom left;
  transition:1.5s; /* adjust this to control the total duration */
}

<a href="#" class="link-underline">link underline.</a>

Text underline animation in CSS - the simplest way?

A simple background animation can do this:

a {
  background: linear-gradient(currentColor 0 0) 
    bottom left/
    var(--underline-width, 0%) 0.1em
    no-repeat;
  color: #f80;
  display: inline-block;
  padding: 0 .5em 0.2em;
  text-decoration: none;
  transition: background-size 0.5s;
}

a:hover {
  --underline-width: 100%;
}

I find <a href="#">dogs</a> pretty cool.

pseudo element across multiple lines to create a continuous underline animation

Use gradient like below:

body {  padding: 20px;  font-family: Helvetica;}
a {  font-weight: bold;  color: black;  position: relative;  text-decoration: none;  background:linear-gradient(#000,#000) left bottom no-repeat;  background-size:0% 2px;  transition: all 0.5s;}
a:hover {  background-size:100% 2px;}/* this will give another kind of animation (all lines will animate at the same time)*/.alt {  -webkit-box-decoration-break:clone;          box-decoration-break:clone;}

<a href="">my link</a><br><br><a href="">this is<br>a much<br>longer link</a><br><br><a class="alt" href="">this is<br>a much<br>longer link</a>