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），但不知道如何实现。 我还希望点击（活动）链接保持有下划线。如何做到这一点？ 感谢您提供任何类型的答案。

- user2061217

---

这个看起来还不错吧？http://jsfiddle.net/fX6xz/ 同时在Chrome、Firefox和IE中进行过测试。 - Scott

是的，对我来说看起来也没问题。 - skos

也许你想添加 #nav_container a { text-decoration: none; } 以使你的效果更加明显。 - Eliezer Bernart

请确保添加浏览器前缀，-moz-transition等。 - dfsq

FYI：不适用于我的IE10。 - Anto Jurković

虽然在IE11上工作，但是与Chrome相比，行之间的距离似乎更接近。 - GolezTrol

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。

- skube

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

- Ankit Agrawal