ul {
	display:flex;
	position:absolute;
	width:800px;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
li {
	position:relative;
	padding:20px;
	font-size:24px;
	color:#000;
	line-height:1;
	transition:0.2s all linear;
	cursor:pointer;
	list-style-type:none;
}
li::before {
	text-decoration:none;
	content:"";
	position:absolute;
	top:0;
	left:100%;
	width:0;
	height:100%;
	border-bottom:2px solid #000;
	transition:0.2s all linear;
}
li:hover::before {
	width:100%;
	top:0;
	left:0;
	transition-delay:0.1s;
	border-bottom-color:#000;
	z-index:-1;
}
li:hover ~ li::before {
	left:0;
}
li:active {
	background:#000;
	color:#fff;
}