CSS滑动下划线

CSS sliding underline

本文关键字：下划线 CSS      更新时间：2023-09-26

我的网站上有水平菜单。我希望菜单链接平滑下划线。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），但不知道如何实现。我还希望单击的（活动）链接保持下划线。如何做到这一点？

我会感谢每一种回答。

不如以锚为目标，而不是像这样以.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。

用这个替换您的代码

.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

相关文章：