<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#">ссылка</a>
<script>
if(!document.querySelector('style')) document.head.insertAdjacentHTML('beforeend', '<style></style>');
document.querySelector('style').innerHTML +='a {line-height: 1;display: inline-block;text-decoration:none;cursor: pointer;}a:after {display: block;content: "";height: 2px;width: 0%;background-color: #000000; transition: width .3s ease-in-out;}a:hover:after,a:focus:after {width: 100%;}';
</script>
</body>
</html>