[英]Add a space between underline and a nav item on hover
I would like the underline effect that appears on hover to have a padding/margin of app. 我希望悬停显示的下划线效果具有应用程序的填充/边距。 5px from the text, just to have some space between.
距文字5px,仅在两者之间留出一些空间。
Here's the code and link to Codepen: 这是代码,并链接到Codepen:
http://codepen.io/anon/pen/MbmBjp http://codepen.io/anon/pen/MbmBjp
Thank you! 谢谢!
* { 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>
Variant #01: 变体#01:
Increase or decrease bottom
value in the following selector: 在以下选择器中增大或减小
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>
Variant #02: 变体#02:
Set following css on <a>
: 在
<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>
http://codepen.io/anon/pen/PbmBpY 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;
} }
add bottom: -5px;
加
bottom: -5px;
to the li > a:before
对
li > a:before
Here's a codepen that solves it: http://codepen.io/anon/pen/zowLZp 这是一个解决该问题的codepen: http ://codepen.io/anon/pen/zowLZp
Add a padding-bottom: 4px
to the li > a
rule, remove the height: 1px
from the li > a:before rule, and add a
border-bottom: 1px solid white` to that same rule. 在
li > a
规则上添加一个padding-bottom: 4px
,从li> a:before rule, and add a
删除一个height: 1px
rule, and add a
同一规则上rule, and add a
border-bottom:1px solid white`。
Add this to your css : li > a:hover 将此添加到您的CSS: li> a:hover
li > a:hover {
color: yellow;
padding-bottom:5px;
}
Check below code snippet. 检查以下代码段。
* { 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>
Just change the value of bottom
in the li > a:before
selector to -5px
. 只需将
li > a:before
选择器中的bottom
值更改为-5px
。 If you do not want to use negative values you can use something like top: 20px
and remove 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>
add padding-bottom: 5px
in below your css.. 在您的CSS下方添加
padding-bottom: 5px
。
li > a:hover {
color: yellow;
padding-bottom: 5px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.