Can anyone explain why padding-bottom or margin-bottom does not seem to have any effect on the underline in the li > a:before section? I tried adding padding-bottom but it doesn't create any space. Any suggestions?
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>