Подсветка анимации при нажатии

Я пытаюсь воссоздать анимацию для описания и просмотра здесь. Подчеркивание анимируется справа налево, когда ссылка отключена, а подчеркивание подчеркивается слева направо, прежде чем она исчезнет.

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>

Ответы

Ответ 1

Используйте position для псевдоэлемента. Добавьте position: relative в a и position: absolute в :after.
Поместите псевдоэлемент с помощью bottom и right. Это означает, что линия начинается с правой стороны.
При наведении/щелчке добавьте свойство left. Это делает линию шириной шириной. Ширина увеличивается от 0 до 100% слева направо.

Когда вы снова открываете или снова щелкаете, left удаляется, а строка начинается справа, поэтому ширина уменьшается в этом направлении.

$('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>

Ответ 2

Возможно, вам нужно только решение HTML/CSS:

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>

Ответ 3

Вы можете использовать следующее. Просто используйте класс для установки стиля.

$('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>