CSS实现导航栏底部动态滚动条效果
纯CSS实现的导航栏底部滚动条效果，如下：
实现滚动条效果，其实就是在
标签中让元素的宽度由0变化到100%，代码很简单，如下所示：CSS样式部分：
<style> ul.nav {background-color: whitesmoke;} ul.nav li {padding: 10px 0;margin: 0 30px;overflow: hidden;display: inline-block;} ul.nav li a {text-decoration: none;} ul.nav li span {position: relative;left: -10%;float: left;width: 5%;transition: border, width .5s;border: 1px solid #5FB878;} ul.nav li:hover span {width: 105%;border: 1px solid #5FB878;} style>
HTML部分：
<div> <ul class="nav"> <li><a href="">导航一a><span>span>li> <li><a href="">导航二a><span>span>li> <li><a href="">导航三a><span>span>li> <li><a href="">导航四a><span>span>li> ul> div>