过渡滑动下划线跳跃

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>