我想知道为什么padding-bottom或margin-bottom不能用于下划线?在li中> a:在我添加padding-bottom之前它并没有创建任何类型的空间。我没有想法,你能帮助我吗?
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: right;
line-height: 10vh;
margin-right: 10vh;
animation: fadein 5s;
-moz-animation: fadein 5s; /* Firefox */
-webkit-animation: fadein 5s; /* Safari and Chrome */
-o-animation: fadein 5s; /* Opera */
font-family: verdana;
}
li {
display: inline;
margin-left: 2.5vh;
margin-right: 5vh;
text-transform: uppercase;
}
a {
text-decoration:none;
color: white;
}
li > a {
position: relative;
color: black;
text-decoration: none;
}
li > a:hover {
color: black;
}
li > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
padding-bottom: 3px;
bottom: 0;
left: 0;
background-color: black;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.7s ease-in-out 0s;
transition: all 0.7s ease-in-out 0s;
}
li > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

<nav id="nav">
<ul>
<li id="about"><a href="#">About</a></li>
<li id="work"><a href="#">Work</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>
</nav>
&#13;
答案 0 :(得分:1)
将bottom: 0
更改为bottom: -3px;
以获得您想要的内容:
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: right;
line-height: 10vh;
margin-right: 10vh;
animation: fadein 5s;
-moz-animation: fadein 5s; /* Firefox */
-webkit-animation: fadein 5s; /* Safari and Chrome */
-o-animation: fadein 5s; /* Opera */
font-family: verdana;
}
li {
display: inline;
margin-left: 2.5vh;
margin-right: 5vh;
text-transform: uppercase;
}
a {
text-decoration:none;
color: white;
}
li > a {
position: relative;
color: black;
text-decoration: none;
}
li > a:hover {
color: black;
}
li > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
padding-bottom: 3px;
bottom: -3px;
left: 0;
background-color: black;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.7s ease-in-out 0s;
transition: all 0.7s ease-in-out 0s;
}
li > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<nav id="nav">
<ul>
<li id="about"><a href="#">About</a></li>
<li id="work"><a href="#">Work</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>
</nav>
答案 1 :(得分:1)
或者将“padding-bottom”添加到“li&gt; a”。工作得很好。 :)
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: right;
line-height: 10vh;
margin-right: 10vh;
animation: fadein 5s;
-moz-animation: fadein 5s; /* Firefox */
-webkit-animation: fadein 5s; /* Safari and Chrome */
-o-animation: fadein 5s; /* Opera */
font-family: verdana;
}
li {
display: inline;
margin-left: 2.5vh;
margin-right: 5vh;
text-transform: uppercase;
}
a {
text-decoration:none;
color: white;
}
li > a {
position: relative;
color: black;
text-decoration: none;
padding-bottom: 10px;
}
li > a:hover {
color: black;
}
li > a:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
padding-bottom: 3px;
bottom: 0;
left: 0;
background-color: black;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.7s ease-in-out 0s;
transition: all 0.7s ease-in-out 0s;
}
li > a:hover:after {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<nav id="nav">
<ul>
<li id="about"><a href="#">About</a></li>
<li id="work"><a href="#">Work</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>
</nav>