Создание анимированных подчеркиваний для ссылок

Демонстрация работы анимированных подчеркиваний для ссылок, адаптация примера из урока Tobias Ahlin, специально для сайта dejurka.ru

HTML

<a href="#">Наведите указатель мыши на эту ссылку 0</a>
<a href="#">Наведите указатель мыши на эту ссылку 1</a>
<a href="#">Наведите указатель мыши на эту ссылку 2</a>
<a href="#">Наведите указатель мыши на эту ссылку 3</a>
<a href="#">Наведите указатель мыши на эту ссылку 4</a>
<a href="#">Наведите указатель мыши на эту ссылку 5</a>
<a href="#">Наведите указатель мыши на эту ссылку 6</a>
<a href="#">Наведите указатель мыши на эту ссылку 7</a>
<a href="#">Наведите указатель мыши на эту ссылку 8</a>
<a href="#">Наведите указатель мыши на эту ссылку 9</a>

CSS

a {
	position: relative;
	color: #0AAAE1;
	text-decoration: none;
	font-size: 24px;
  display:inline-block;
}

a:hover {
	color: #0AAAE1;
}

a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: #0AAAE1;
  visibility: hidden;

  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
}

a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}