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.

possible duplicate of [css, underline, possible to increase gap](http://stackoverflow.com/questions/1734618/css-underline-possible-to-increase-gap) — bpeterson76, Apr 08 '15 at 23:15
For this you'll need `padding-bottom` and a `border-bottom`, as underlines are text-markup and can't be modified. — somethinghere, Apr 08 '15 at 23:15

AndrewL64 · Accepted Answer · 2020-01-22T17:33:02.017

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/

Underline links in navbar in CSS/HTML

1 Answers1