悬停文本和底部

Question

我的主题导航栏有一个问题，当只有一个单词，如家或联系人，你在它上面的鼠标以正确的方式悬停世界，但当我添加一个单词，如主页，悬停显示第二个单词下面的主要一个，以及不能正常工作。下面是HTML代码：

    <li>
    <a href="#" data-hover="ABOUT US" >ABOUT US</a> </li>

下面是CSS脚本：

@media (min-width:768px) {
    .menu > li > a::before,
    .menu .current > a::before {
        position: absolute;
        top: 25px;
        left: 20px;
        overflow: hidden;
        max-width: 0;
        color: rgb(34,171,166);
        content: attr(data-hover);
        -webkit-transition: max-width 1s ease-out;
        transition: max-width 1s ease-out;
    }
    .menu > li > a:hover::before,
    .menu > li > a:focus::before,
    .menu > .active > a {
        max-width: 100%;
        -webkit-transition: max-width 1s ease-out;
        transition: max-width 1s ease-out;
    }
}

Answer 1

所以，正如评论中所描述的:您的原始代码具有：

<a href="#" data-hover="ABOUT US" >ABOUT&nbsp;US</a> </li>

正如您所看到的:不间断的空格可以防止原始文本被分成两行。data-hover没有这个换行空格，因此它的行为有所不同。

您还可以添加white-space: nowrap;，这样就不需要手动插入不间断的空格。