Underline animation on click

Question

I'm trying to recreate the animation on description and review here. The underline animates from right to left when the link is unclicked the underline animates from left to right before it disappears.

a {
  color:#00f;
  text-decoration:none;
  display:inline-block;
}
a:after {
  width: 0;
  display:block;
  background:#00f;
  height:3px;
  transition: all .5s ease-in-out;
  content:"";
}
a:hover {
  color:#00f;
}
a:hover:after {
  width:100%;
}

<a href="#">Click first</a>
<a href="#">Click second</a>

Answer 1

1. Use position on the pseudoelement. Add position: relative to a, and position: absolute to :after.

2. Position the pseudoelement using bottom and right. This means the line originates from the right side.

3. On hover/click, add the left property. This makes the line span the full width. The width grows from 0 to 100% from left to right.

When you 'unhover' or click again, left is removed, and the line originates from the right again, so the width decreases in that direction.

$('a').on('click', function() {
  $('a').not(this).removeClass('underline');
  $(this).toggleClass('underline');
});

a {
  color: #00f;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

a:after {
  width: 0;
  background: #00f;
  height: 3px;
  transition: all .5s ease-in-out;
  content: "";
  position: absolute;
  bottom: -5px;
  right: 0;
}

a.underline:after {
  width: 100%;
  left: 0;
}

a:hover:after {
  width: 100%;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Click first</a>
<a href="#">Click second</a>

Answer 2

Maybe you want a HTML/CSS only solution:

a {
  color: #00f;
  text-decoration: none;
  display: inline-block;
}

a span:after {
  width: 0;
  display: block;
  background: #00f;
  height: 3px;
  transition: all .5s ease-in-out;
  content: "";
  float: right;
}

a span:focus {
  color: #00f;
}

label:hover {
  cursor: pointer;
}

label input {
  display: none;
}

label input:checked + span:after, label input + span:hover:after  {
  width: 100%;
  float: left;
}

label input:checked + span {
  color: #00f;
}

<a href="#">
  <label>
    <input type="radio" name="link" />
    <span>
      Click first
    </span>
  </label>
</a>
<a href="#">
  <label>
    <input type="radio" name="link" />
    <span>
      Click second
    </span>
  </label>
</a>

Answer 3

You can use the following. Just use a class to set style.

$('a').click(function(e){
  $(this).siblings().removeClass('start');
  $(this).toggleClass('start');
  e.preventDefault();
})

a {
  color:#00f;
  text-decoration:none;
  display:inline-block;
}
a:after {
  width: 0;
  display:block;
  background:#00f;
  height:3px;
  transition: all .5s ease-in-out;
  content:"";
  float:right;
}
a:hover {
  color:#00f;
}
a.start:after {
  width: 100%;
}
a:hover:after {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Click first</a>
<a href="#">Click second</a>