<nav>
	<a href="#">Features</a>
	<a href="#">PressKit</a>
	<a href="#">Download</a>
</nav>
body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: rgb(40, 45, 45);
	font: normal 400 130%/1.5 -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

nav {
	display: grid;
	grid-auto-flow: column;
	grid-gap: 1em;
}

a {
	position: relative;
	font-weight: 600;
	text-decoration: none;
	color: white;
	opacity: .7;
	transition: opacity .3s cubic-bezier(.51, .92, .24, 1);

	&::after {
		--scale: 0;

		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: 3px;
		background: linear-gradient(135deg, rgb(115, 250, 200), rgb(0, 190, 225));
		transform: scaleX(var(--scale));
		transform-origin: var(--x) 50%;
		transition: transform .3s cubic-bezier(.51, .92, .24, 1);
	}

	&:hover {
		opacity: 1;
	}

	&:hover::after {
		--scale: 1;
	}
}
View Compiled
document.querySelectorAll('a').forEach((elem) => {

	elem.onmouseenter =
	elem.onmouseleave = (e) => {

		const tolerance = 10

		const left = 0
		const right = elem.clientWidth

		let x = e.pageX - elem.offsetLeft

		if (x - tolerance < left) x = left
		if (x + tolerance > right) x = right

		elem.style.setProperty('--x', `${ x }px`)

	}

})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.