body {

	/* Link color variable containing RGB value */
	--link-color: 102, 153, 255;
}
.sample {
	width:800px;
	margin:20px auto;
	position:relative;
	text-align:left;
	}

.sample a {
	position: relative;
	display: inline-block;
	font-family: sans-serif;
	font-size: 44px;
	text-decoration: none;
	color: rgb(var(--link-color));
}

.sample a:hover::after {
	content: "";
	display: block;
	position: absolute;
	top:58px;
	width: 100%;

	/* Adjust height and bottom values to work with selected font */
	height: .09em;
	bottom: .1em;

	/* Create gradient */
	background-image: linear-gradient(
		to right,
		transparent 0%,
		rgba(var(--link-color), .6) 30%,
		rgba(var(--link-color), .7) 50%,
		rgba(var(--link-color), .6) 70%,
		transparent 100%
	);

	/* Set-up fade-in animation */
	opacity: 0;
	animation: fadeIn 400ms ease-out forwards;
}

@keyframes fadeIn {
	100% {
		opacity: 1;
	}
}