CSS下划线菜单

Question

我承认我是一个没有编码器的人，我需要看看我的菜单：

我确实希望在悬停时为其设置动画，我希望效果在单击后保留（您可以在我附加的CSS代码中看到动画的示例）。所以我设法获得了底部边框，但我确实想在边框和文本之间创建一些空间，我也想获得顶部边框。出于某种原因，它对我不起作用。

到目前为止，这是我的代码：

ol, ul {
     list-style: none;
}
 li {
     display: inline-block;
     vertical-align: middle;
}
 a:hover, a:focus, a:active {
     color: #61f6ff;
     text-decoration: none;
}
 a::before {
     content: '';
     display: block;
     position: absolute;
     bottom: 3px;
     left: 0;
     height: 3px;
     width: 100%;
     background-color: #61f6ff;
     transform-origin: right top;
     transform: scale(0, 1);
     transition: color 0.1s,transform 0.2s ease-out;
}
 a:active::before {
     background-color: #61f6ff;
}
 a:hover::before, a:focus::before {
     transform-origin: left top;
     transform: scale(1, 1);
}

<ul>
  <li class="item"><a href="#">Homepage</a></li>
  <li class="item"><a href="#">About Us</a></li>
  <li class="item"><a href="#">Our Services</a></li>
  <li class="item"><a href="#">Costumers</a></li>
  <li class="item"><a href="#">Contact Us</a></li>
</ul>

Answer 1

将border-top和border-bottom分配给锚点链接，并通过css3过渡为它们设置动画，以实现类似动画的淡入淡出。您还可以使用填充来实现边框和文本之间的更多空间。下面的工作代码。

＆＃13;

＆＃13;

ol,
ul {
    list-style: none;
}

li {
    display: inline-block;
    vertical-align: middle;
}

a {
    text-decoration: none;
    color: #0B1B70;
    -webkit-transition: border 200ms ease-out;
    -moz-transition: border 200ms ease-out;
    -o-transition: border 200ms ease-out;
    transition: border 200ms ease-out;
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    padding: 2px;
}

a:hover,
a:focus,
a:active {
    border-bottom: 1px solid #61f6ff;
    border-top: 1px solid #61f6ff;
}

＆＃13;

<nav>
    <ul>
        <li class="item">
            <a href="#">Homepage</a>
        </li>
        <li class="item">
            <a href="#">About Us</a>
        </li>
        <li class="item">
            <a href="#">Our Services</a>
        </li>
        <li class="item">
            <a href="#">Costumers</a>
        </li>
        <li class="item">
            <a href="#">Contact Us</a>
        </li>
    </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;