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 — bpeterson76
– bpeterson76, Commented Apr 8, 2015 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
– somethinghere, Commented Apr 8, 2015 at 23:15

AndrewL64 · Accepted Answer · 2020-01-22 17:33:02Z

10

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/

edited Jan 22, 2020 at 17:33

answered Apr 8, 2015 at 23:19

AndrewL64

16.4k8 gold badges51 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Underline links in navbar in CSS/HTML

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related