CSS滑動下划線

Question

我的網站上有水平菜單。 我希望菜單鏈接順利下划線。 HTML

<nav id="nav_container">
    <ul id="nav">
        <li class="nav_item"><a href="#">Sportovci</a></li>
        <li class="nav_item"><a href="#">Specialisté</a></li>
        <li class="nav_item"><a href="#">Kluby</a></li>
        <li class="nav_item"><a href="#">Obchody</a></li>
        <li class="nav_item"><a href="#">Ligy</a></li>
        <li class="nav_item"><a href="#">Články</a></li>
        <li class="nav_item"><a href="#">Kontakt</a></li>
    </ul>
</nav>           

CSS

.nav_item {
    display: inline-block;
    margin: 0 10px;
}

.nav_item:after {
    content: '';
    display: block;
    height: 1px;
    width: 0;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}

.nav_item:hover:after {
    width: 100%;
    background: #236fe8;
}

使用此代碼，鏈接將在懸停時從左到右加下划線，但是當我用鼠標外出時，它不會順利返回。 我認為這將是一些JavaScript（jQuery），但不知道如何。 我還希望點擊（活動）鏈接保持下划線。 這個怎么做？

我會感謝各種答案。

Answer 1

如何定位錨點而不是.nav_item如下：

a:after {
    content: '';
    display: block;
    height: 1px;
    width: 0;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}

a:hover:after {
    width: 100%;
    background: #236fe8;
}

在這里你更新了jsFiddle 。

Answer 2

用這個替換你的代碼

.nav_item:after {
    content: '';
    display: block;
    height: 1px;
    width: 0;`enter code here`
    background: transparent;
    transition: width .5s ease, background-color .9s ease;
}

轉到以下鏈接獲取更多幫助，我希望它能解決您的問題http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp