<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯Css实现下划线跟随滑动</title>
<style type="text/css">
ul { /*ul定位到页面中间位置*/
margin: 50px auto;
width: 500px;
list-style:none;
}
li { /*设置li位置、字体大小*/
position: relative;
font-size: 25px;
float: left;
padding: 0 20px 0 20px;
}
/*利用:before实现下划线宽度从0-100%*/
li:before {
content: "";
position: absolute;
top: 0;
left: 100%; /*下划线从右侧开始显示*/
width: 0;
height: 100%;
border-bottom: 2px solid red;
transition: 0.2s all linear; /*动画效果*/
}
li:hover:before {
left: 0; /*鼠标滑过时，下划线从右向左移动*/
width: 100%; /*同时，下划线宽度从0-100%*/
}
li:hover ~ li:before { /*~ 选择器：查找指定元素后面的所有兄弟结点*/
left: 0; /*处于hover后面元素的下划线从左侧开始显示*/
}
</style>
</head>
<body>
<ul class="container">
<li>简介</li>
<li>详情</li>
<li>帮助</li>
<li>我的</li>
</ul>
</body>
</html>