Анимация ссылок при наведении

Иногда бывает необходимость придать вашему сайту некоторую динамику. Мне очень нравится динамическое подчеркивание ссылок при наведении, сделанное при помощи чистого CSS. Плюсы здесь чисто визуальные эффекты для пользователя и простота исполнения, которая не будет тормозить загрузку вашего сайта. Пример можно посмотреть здесь:

See the Pen ПОДЧЕРКНУТАЯ ССЫЛКА(abcinblog) by YaroslavW (@YaroslavW) on CodePen.

код очень простой:

HTML

<h2><a href="#">It is underlined link</a></h2>

CSS

h2 > a {
  position: relative;
  text-decoration: none;
  color:#000;
}
h2 > a:hover {
  color: red;
}
h2 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background-color: green;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: sczlaX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

Для того, чтобы вам было проще ориентироваться в коде, что там за что отвечает и пр., я выделил все разными цветами.