过渡滑动下划线跳跃

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

根据您的代码，所有list元素的宽度都是100%，这是可以的，但是请确保将动画应用到list元素内的链接，而不是list元素本身。试一试：

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