/* === relevant portion === */
a {
	color: #000;
	position: relative;
	text-decoration: none;

	background-image: linear-gradient(hsl(45 100% 70%) 0 0);
	background-size: 0% 100%;
	background-position: right top;
	background-repeat: no-repeat;
	transition: background-size ease-in-out 400ms;
}

a:hover {
	background-size: 100% 100%;
	background-position: left top;
}

/* === to make things look pretty === */
html,
body {
	padding: 0;
	margin: 0;
}
body {
	display: grid;
	font-family: system-ui, sans;
	font-size: 3.5rem;
	font-weight: 800;
	height: 100vh;
	place-items: center;
}