我希望悬停在悬停的下划线效果以具有应用程序的填充/边距。文本中的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>
变体#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>
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
这是一个解决该问题的代码epen:http://codepen.io/anon/pen/zowlzp
将padding-bottom: 4px
添加到li > a
规则中,从li> a中删除height: 1px
:在rule, and add a
Border-Bottom之前:1px固体白色"到同一规则"。
将其添加到您的CSS: li> a:hover
li > a:hover {
color: yellow;
padding-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;
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>
只需将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>
尝试此
演示
li > a:hover {
color: yellow;
padding:10px 0;
}
在CSS下方添加padding-bottom: 5px
。
li > a:hover {
color: yellow;
padding-bottom: 5px;
}