src/MenuHover.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Menu Hover</title>
		<style>
			body {
				margin: 0;
				padding: 0;
				background: #f1f1f1;
				display: flex;
				justify-content: center;
			}
			.menu {
				margin: 0;
				padding: 0;
				margin-top: 200px;
			}
			.menu li {
				list-style: none;
				display: inline-block;
			}
			.menu li a {
				text-decoration: none;
				position: relative;
				color: #313131;
				font-size: 50px;
				font-weight: 700;
				font-family: sans-serif;
				display: block;
				overflow: hidden;
				transition: 0.7s all;
				padding: 14px 30px;
				text-transform: uppercase;
			}
			.menu li a:before {
				content: '';
				width: 60px;
				position: absolute;
				border-bottom: 8px solid #313131;
				bottom: 0;
				right: 350px;
				transition: 0.7s all;
			}
			.menu li a:hover:before {
				right: 0;
			}
		</style>
	</head>
	<body>
		<ul class="menu">
			<li><a href="#">Home</a></li>
			<li><a href="#">Works</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Buy</a></li>
		</ul>
	</body>
</html>