Gap between text and underline

Question

I would like to know why padding-bottom or margin-bottom does not work with underline? In li > a:before I added padding-bottom and it does not create any kind of space. I'm out of ideas, can you help me?

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>

Possible duplicate of [How to increase the gap between text and underlining in CSS](https://stackoverflow.com/questions/1734618/how-to-increase-the-gap-between-text-and-underlining-in-css) — jonrsharpe, Jun 22 '17 at 22:15

score 1 · Accepted Answer · answered Jun 22 '17 at 22:17

Change bottom: 0 to bottom: -3px; to get what you want:

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>

score 1 · Answer 2 · answered Jun 22 '17 at 22:24

Or add "padding-bottom" to "li > a". Works just fine. :)

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>

Gap between text and underline

2 Answers2