/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Анимированное подчеркивание при наведении курсора">
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
body {
    font-family: -apple-system, "San Francisco", "Helvetica Neue", "Lucida Grande";

}
a {
  text-decoration: none;
  color: black;
  cursor: pointer;
  padding-bottom: 0px;
  border-bottom: 1px solid;
}

li {
  font-size: 20px;
  line-height: 40px;
}

.a_visited {
  color: #888888;
  border-color: #ABAFB8;
}

.a_normal {
  border-color: #ABAFB8;
}

.a_hover {
  color: #0A3FB4;
  border-color: #0A3FB4;
}


.a {
  text-decoration: none;
  color: black;
  font-family: Helvetica;
  padding-bottom: 1px;
  border-bottom: 1px solid #ABAFB8;
  transition: border-color 2s cubic-bezier(0.23, 1, 0.32, 1),                 color 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.a:hover {
  color: #0A3FB4;
  border-color: #0A3FB4;
}

.a:visited {
  color: #888888;
  border-color: #ABAFB8;
}

.tenline {
  border-bottom: 10px solid #ABAFB8;
}
</style>
</head>
<body>
  <article>
    <aside>
      <p>Пример создания опрятной и современной ссылки: анимированное подчеркивание при наведении курсора</p>
    </aside>
    <ul>
      <li class="item"><a class="a_visited">Состояние — посещенное</a></li>

      <li class="item"><a class="a_normal">Состояние — по-умолчанию</a></li>

      <li class="item"><a class="a_hover">Состояние — под курсором</a></li>

      <li class="item"><a class="a tenline">Пример с особенно широким бордером — 10px</a></li>

      <li class="item"><a class="a">Рабочий пример</a></li>
    </ul>
  </article>


<script id="jsbin-source-css" type="text/css">body {
    font-family: -apple-system, "San Francisco", "Helvetica Neue", "Lucida Grande";

}
a {
  text-decoration: none;
  color: black;
  cursor: pointer;
  padding-bottom: 0px;
  border-bottom: 1px solid;
}

li {
  font-size: 20px;
  line-height: 40px;
}

.a_visited {
  color: #888888;
  border-color: #ABAFB8;
}

.a_normal {
  border-color: #ABAFB8;
}

.a_hover {
  color: #0A3FB4;
  border-color: #0A3FB4;
}


.a {
  text-decoration: none;
  color: black;
  font-family: Helvetica;
  padding-bottom: 1px;
  border-bottom: 1px solid #ABAFB8;
  transition: border-color 2s cubic-bezier(0.23, 1, 0.32, 1),                 color 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.a:hover {
  color: #0A3FB4;
  border-color: #0A3FB4;
}

.a:visited {
  color: #888888;
  border-color: #ABAFB8;
}

.tenline {
  border-bottom: 10px solid #ABAFB8;
}</script>
</body>
</html>

## jsbin.humeso.css
body {
    font-family: -apple-system, "San Francisco", "Helvetica Neue", "Lucida Grande";

}
a {
  text-decoration: none;
  color: black;
  cursor: pointer;
  padding-bottom: 0px;
  border-bottom: 1px solid;
}

li {
  font-size: 20px;
  line-height: 40px;
}

.a_visited {
  color: #888888;
  border-color: #ABAFB8;
}

.a_normal {
  border-color: #ABAFB8;
}

.a_hover {
  color: #0A3FB4;
  border-color: #0A3FB4;
}


.a {
  text-decoration: none;
  color: black;
  font-family: Helvetica;
  padding-bottom: 1px;
  border-bottom: 1px solid #ABAFB8;
  transition: border-color 2s cubic-bezier(0.23, 1, 0.32, 1),                 color 2.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.a:hover {
  color: #0A3FB4;
  border-color: #0A3FB4;
}

.a:visited {
  color: #888888;
  border-color: #ABAFB8;
}

.tenline {
  border-bottom: 10px solid #ABAFB8;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Анимированное подчеркивание при наведении курсора">
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	body {
	font-family: -apple-system, "San Francisco", "Helvetica Neue", "Lucida Grande";

	}
	a {
	text-decoration: none;
	color: black;
	cursor: pointer;
	padding-bottom: 0px;
	border-bottom: 1px solid;
	}

	li {
	font-size: 20px;
	line-height: 40px;
	}

	.a_visited {
	color: #888888;
	border-color: #ABAFB8;
	}

	.a_normal {
	border-color: #ABAFB8;
	}

	.a_hover {
	color: #0A3FB4;
	border-color: #0A3FB4;
	}


	.a {
	text-decoration: none;
	color: black;
	font-family: Helvetica;
	padding-bottom: 1px;
	border-bottom: 1px solid #ABAFB8;
	transition: border-color 2s cubic-bezier(0.23, 1, 0.32, 1), color 2.5s cubic-bezier(0.23, 1, 0.32, 1);
	}

	.a:hover {
	color: #0A3FB4;
	border-color: #0A3FB4;
	}

	.a:visited {
	color: #888888;
	border-color: #ABAFB8;
	}

	.tenline {
	border-bottom: 10px solid #ABAFB8;
	}
	</style>
	</head>
	<body>
	<article>
	<aside>
	<p>Пример создания опрятной и современной ссылки: анимированное подчеркивание при наведении курсора</p>
	</aside>
	<ul>
	<li class="item"><a class="a_visited">Состояние — посещенное</a></li>

	<li class="item"><a class="a_normal">Состояние — по-умолчанию</a></li>

	<li class="item"><a class="a_hover">Состояние — под курсором</a></li>

	<li class="item"><a class="a tenline">Пример с особенно широким бордером — 10px</a></li>

	<li class="item"><a class="a">Рабочий пример</a></li>
	</ul>
	</article>


	<script id="jsbin-source-css" type="text/css">body {
	font-family: -apple-system, "San Francisco", "Helvetica Neue", "Lucida Grande";

	}
	a {
	text-decoration: none;
	color: black;
	cursor: pointer;
	padding-bottom: 0px;
	border-bottom: 1px solid;
	}

	li {
	font-size: 20px;
	line-height: 40px;
	}

	.a_visited {
	color: #888888;
	border-color: #ABAFB8;
	}

	.a_normal {
	border-color: #ABAFB8;
	}

	.a_hover {
	color: #0A3FB4;
	border-color: #0A3FB4;
	}


	.a {
	text-decoration: none;
	color: black;
	font-family: Helvetica;
	padding-bottom: 1px;
	border-bottom: 1px solid #ABAFB8;
	transition: border-color 2s cubic-bezier(0.23, 1, 0.32, 1), color 2.5s cubic-bezier(0.23, 1, 0.32, 1);
	}

	.a:hover {
	color: #0A3FB4;
	border-color: #0A3FB4;
	}

	.a:visited {
	color: #888888;
	border-color: #ABAFB8;
	}

	.tenline {
	border-bottom: 10px solid #ABAFB8;
	}</script>
	</body>
	</html>