Underline links in navbar in CSS/HTML

Question

I have the underlining part down. I am just trying to get the underline itself further away from the text. Also, this is occurs when I hover, which I want.

For example:

Home

---

Something like that.

My code so far:

#menu a:hover { color: #FFF; background-color: #252525; text-decoration:underline; }

If anymore information is necessary, please let me know.

Answer 1

Use border-bottom instead of underline so you can use padding to manipulate the space between your link and the underline like this:

HTML:

<div id="menu">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

CSS:

#menu a {
    color: #FFF;
    background-color: #252525;
    text-decoration: none;
    border-bottom: transparent solid 1px;
    padding-bottom: 5px;
}
#menu a:hover {
    color: #FFF;
    background-color: #252525;
    border-bottom: red solid 1px;
}

Here's a JSFiddle with above code: https://jsfiddle.net/AndrewL32/e0d8my79/39/