您的位置：首页 > Web前端 > CSS

纯CSS实现鼠标滑过下划线跟随效果

2018-06-19 11:29 162 查看

效果如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入reset.css重置样式-->
<link href="https://cdn.bootcss.com/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<style type="text/css">
ul { /*ul定位到页面中间位置*/
margin: 50px auto;
width: 500px;
}
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>

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航