css - 过渡滑动下划线跳跃

Question

我正在尝试使用 CSS 过渡在我的一个页面上添加滑动下划线(在 hover 上，下划线从左向右滑入)。我一次在多个 li 元素上使用它:

#menu li{
    border-bottom:2px solid transparent;
    width:0px;
    transition:0.8s ease;
    white-space:nowrap;
}
#menu li:hover{
    border-bottom:2px solid #FFE5C7;
    width:100%;
}

有效，下划线淡入并滑过以在列表项下划线。问题是列表项文本的长度不同，并且由于某种原因将鼠标悬停在较长的文本字符串上，然后移动到较短的 li，过渡会将下划线增加到长度上一个元素，然后快速返回。如果这是有道理的...示例:

首页
联系我

如果我首先将鼠标悬停在“联系我”上，则下划线有效。如果我然后移动到“主页”，下划线会增长到“联系我”下划线的长度，然后快速返回。不知道为什么，还没有找到有效的解决方案。我不想将宽度设置为特定的像素数，我只希望文本本身带有下划线。

Answer 1

根据您的代码，所有列表元素都将具有相同的 100% 宽度，这没问题，但是请确保将动画应用于列表元素内的链接，而不是列表元素本身。试试这个:

#menu ul li > a{
    position: relative;
    -o-transition:0.8s ease;
    -ms-transition:0.8s ease;
    -moz-transition:0.8s ease;
    -webkit-transition:0.8s ease;
    transition:0.8s ease;
    white-space:nowrap;
}

#menu ul li > a:before {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #FFE5C7;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

#menu ul li > a:hover:before {
    visibility: visible;
    width: 100%;
}

您的 HTML 应如下所示:

<nav id="menu">
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">Contact Me</a>
        </li>
    </ul>
</nav>