* {
	margin:0;
	padding:0;
}
ul {
	width:800px;
	margin:20px auto 0;
}
li {
	float:left;
	position:relative;
	padding:20px;
	font-size:24px;
	color:#000;
	line-height:1;
	transition:0.2s all linear;
	list-style:none;
	cursor:pointer;
}
li::before {
	content:"";
	position:absolute;
	top:0;
	left:100%;
	width:0;
	height:100%;
	border-bottom:3px solid #000;
	transition:0.2s all linear;
}
li:hover::before {
	width:100%;
	top:0;
	left:0;
	transition-delay:0.1s;
	/*过渡延迟*/
	border-bottom-color:#000;
}
li:hover ~ li::before {
	left:0;
}
li:active {
	background:#000;
	color:#fff;
}