【问题标题】：Add a space between underline and a nav item on hover悬停时在下划线和导航项之间添加空格
【发布时间】：2016-11-23 11:57:21
【问题描述】：
我希望悬停时出现的下划线效果具有应用程序的填充/边距。距离文本 5px，只是为了在它们之间留一些空间。
这是 Codepen 的代码和链接：
http://codepen.io/anon/pen/MbmBjp
谢谢！
* {
background-color: blue;
}
nav ul li {
display: inline-block;
padding-left: 35px;
font-size: 12px;
font-weight: bold;
}
/*Underline animation*/
li > a {
position: relative;
color: white;
text-decoration: none;
}
li > a:hover {
color: yellow;
}
li > a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
background-color: yellow;
visibility: hidden;
transform: scaleX(0);
transition: all 0.1s ease-in-out 0s;
}
li > a:hover:before {
visibility: visible;
transform: scaleX(1);
}
<nav class="menu" id="menu">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
【问题讨论】：
标签：
html
css
css-animations
【解决方案1】：
变体 #01：
增加或减少以下选择器中的bottom 值：
li > a:before {
bottom: -5px; /* Change in this value will increase or decrease gap */
}
* {
background-color: blue;
}
nav ul li {
display: inline-block;
padding-left: 35px;
font-size: 12px;
font-weight: bold;
}
/*Underline animation*/
li > a {
position: relative;
color: white;
text-decoration: none;
}
li > a:hover {
color: yellow;
}
li > a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -5px;
background-color: yellow;
visibility: hidden;
transform: scaleX(0);
transition: all 0.1s ease-in-out 0s;
}
li > a:hover:before {
visibility: visible;
transform: scaleX(1);
}
<nav class="menu" id="menu">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
变体 #02：
在<a>上设置以下css：
li > a {
display: inline-block;
vertical-align: top;
padding-bottom: 5px; /* Change in padding-bottom value will increase or decrease gap */
}
* {
background-color: blue;
}
nav ul li {
display: inline-block;
padding-left: 35px;
font-size: 12px;
font-weight: bold;
}
/*Underline animation*/
li > a {
display: inline-block;
vertical-align: top;
padding-bottom: 5px;
position: relative;
color: white;
text-decoration: none;
}
li > a:hover {
color: yellow;
}
li > a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
background-color: yellow;
visibility: hidden;
transform: scaleX(0);
transition: all 0.1s ease-in-out 0s;
}
li > a:hover:before {
visibility: visible;
transform: scaleX(1);
}
<nav class="menu" id="menu">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
【解决方案2】：
http://codepen.io/anon/pen/PbmBpY
li > a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -5px;
background-color: yellow;
visibility: hidden;
transform: scaleX(0);
transition: all 0.1s ease-in-out 0s;
}
将bottom: -5px; 添加到li > a:before
【解决方案3】：
这里有一个可以解决这个问题的 codepen：http://codepen.io/anon/pen/zowLZp
将padding-bottom: 4px 添加到li > a 规则，从li 中删除height: 1px > a:beforerule, and add aborder-bottom: 1px solid white` 到同一规则。
【解决方案4】：
将此添加到您的 css 中：li > a:hover
li > a:hover {
color: yellow;
padding-bottom:5px;
}
检查下面的代码sn-p。
* {
background-color: blue;
}
nav ul li {
display: inline-block;
padding-left: 35px;
font-size: 12px;
font-weight: bold;
}
/*Underline animation*/
li > a {
position: relative;
color: white;
text-decoration: none;
}
li > a:hover {
color: yellow;
padding-bottom:5px;
}
li > a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
background-color: yellow;
visibility: hidden;
transform: scaleX(0);
transition: all 0.1s ease-in-out 0s;
}
li > a:hover:before {
visibility: visible;
transform: scaleX(1);
}
<nav class="menu" id="menu">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
【解决方案5】：
只需将li > a:before 选择器中bottom 的值更改为-5px。
如果您不想使用负值，可以使用 top: 20px 之类的内容并删除 bottom: -5px。
* {
background-color: blue;
}
nav ul li {
display: inline-block;
padding-left: 35px;
font-size: 12px;
font-weight: bold;
}
/*Underline animation*/
li > a {
position: relative;
color: white;
text-decoration: none;
}
li > a:hover {
color: yellow;
}
li > a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -5px;
background-color: yellow;
visibility: hidden;
transform: scaleX(0);
transition: all 0.1s ease-in-out 0s;
}
li > a:hover:before {
visibility: visible;
transform: scaleX(1);
}
<nav class="menu" id="menu">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
【解决方案6】：
试试这个
demo
li > a:hover {
color: yellow;
padding:10px 0;
}
【解决方案7】：
在您的 CSS 下方添加 padding-bottom: 5px..
li > a:hover {
color: yellow;
padding-bottom: 5px;
}