纯css导航栏下标线跟随效果

前言:看着效果不错，仿做了一下，其实就是c3动画移动div伪装的下边框线

主要：li的结束标签与第二项的li开始标签不要有空格及换行，消除间隙

css

* {
				box-sizing: border-box;
			}
			
			* {
				margin: 0;
				padding: 0;
			}
			
			#main {
				position: relative;
				list-style: none;
				background: #6BBE92;
				display: inline-block;
			}
			
			#main li {
				display: inline-block;
				position: relative;
				padding: 15px 20px;
				width: 120px;
			}
			
			#marker {
				height: 6px;
				background: red;
				position: absolute;
				bottom: 0;
				width: 120px;
				transition: all 0.35s;
			}
			
			#main li:nth-child(1):hover~#marker {
				transform: translate(0px, 0);
			}
			
			#main li:nth-child(2):hover~#marker {
				transform: translate(120px, 0);
			}
			
			#main li:nth-child(3):hover~#marker {
				transform: translate(240px, 0);
			}
			
			#main li:nth-child(4):hover~#marker {
				transform: translate(360px, 0);
			}

html

                 <ul id="main">
			<li>主页</li><li>
			
				关于我们</li><li>
			
				项目分类</li><li>
			
				联系我们</li>
			<div id="marker"></div>
		</ul>