Make Bottom Border Closer To Text

Question

I want to underline my navigation menu but the problem is that I need it to be thicker so I am using bottom border instead so that I can set the width to 6px. I can seem to figure out how to get the border to appear closer to the text. There seems to about a 10px gap between the text and the bottom-border at the moment and I don't want to have any. I have tried to position another div and position it relative to each {li} with {bottom: 10px} but I can't seem to get it to work. Here's what I have so CODE ``` ``` CSS ``` #menu { position: fixed; left: 25%; clear: both; float: left; font-size: 80px; z-index: 500; filter: alpha(opacity=75); opacity: .75; } #menu ul{ text-decoration: none; list-style-type: none; margin: 0; padding: 0; line-height: 90px; } #menu ul li{ text-decoration: none; list-style-type: none; margin: 0; } #menu ul li a{ border-…

Accepted Answer

You can use a mixture of `line-height` and `margin` to garner such an effect, like so:

```
#menu ul li a {
    border-bottom: 6px solid #000000;
    color: #000000;
    display: block;
    line-height: 50px;
    list-style-type: none;
    margin: 20px 0;
    text-decoration: none;
}
```

Make Bottom Border Closer To Text

Solution

Problem