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过渡对其进行动画处理，以实现像动画一样的淡入淡出。 您也可以使用填充来获得边框和文本之间的更多空间。 下面的工作代码。

 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; } 

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