javascript - 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

如何定位 anchor 而不是像这样的 .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;
}

这是你的 updated jsFiddle .