Add a space between underline and a nav item on hover - html

Question

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.
Here's the code and link to Codepen:
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>ABOUT</li>
<li>SERVICE</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>

Answer 1

Variant #01:
Increase or decrease bottom value in the following selector:
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>ABOUT</li>
<li>SERVICE</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
Variant #02:
Set following css on <a>:
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>ABOUT</li>
<li>SERVICE</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>

Answer 2

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; to the li > a:before

Answer 3

Here's a codepen that solves it: http://codepen.io/anon/pen/zowLZp
Add a padding-bottom: 4px to the li > a rule, remove the height: 1px from the li > a:beforerule, and add aborder-bottom: 1px solid white` to that same rule.

Answer 4

Add this to your 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>ABOUT</li>
<li>SERVICE</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>

Answer 5

Just change the value of bottom in the li > a:before selector to -5px.
If you do not want to use negative values you can use something like top: 20px and remove 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>ABOUT</li>
<li>SERVICE</li>
<li>WORK</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>

Answer 6

try this
demo
li > a:hover {
color: yellow;
padding:10px 0;
}

Answer 7

add padding-bottom: 5px in below your css..
li > a:hover {
color: yellow;
padding-bottom: 5px;
}