CSS實現導航欄底部動態滾動條效果

預習了CSS3部分的新知識，想着在不使用JS的情況下實現導航欄滾動條效果，如下：

實現滾動條效果，其實就是在<li></li>標簽中讓<span>元素的寬度由0變化到100%，代碼很簡單，如下所示：

CSS樣式部分：

<style>
        ul.nav{background-color: whitesmoke;}
        ul.nav li{padding: 10px 0;margin: 0 30px;overflow: hidden;}
        ul.nav li a{text-decoration: none;}
        ul.nav li span{position: relative;left: -5%;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 class="container">
    <h2>Hello World!</h2>
    <div>
        <ul class="nav">
            <li><a href="">導航一</a><span></span></li>
　　　　　　　<li><a href="">導航二</a><span></span></li>　　
　　　　　　　　...
        </ul>
    </div>
</div>