How to increase the gap between text and underlining on my navbar links

Question

I set the navbar links to underlines when active but i want some margin between the text and the underline. How can i code it in css?

.nav .active a{
  text-decoration: underline;

}

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <nav>
            <ul class="nav navbar-default">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="#">Profile</a></li>
            <li role="presentation"><a href="#">Messages</a></li>
            </ul>
        </nav>
           
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
       
    </body>
</html>

possible duplicate of [How to increase the gap between text and underlining in CSS](http://stackoverflow.com/questions/1734618/how-to-increase-the-gap-between-text-and-underlining-in-css) — Uriil, Jun 05 '15 at 13:00

score 2 · Answer 1 · answered Jun 05 '15 at 13:02

You can't, not with text-decoration anyway.

You're going to need to modify your markup and add an element that you can apply a border to:

HTML

<nav>
    <ul class="nav navbar-default">
        <li role="presentation" class="active"><a href="#"><span>Home</span></a></li>
        <li role="presentation"><a href="#"><span>Profile</span></a></li>
        <li role="presentation"><a href="#"><span>Messages</span></a></li>
    </ul>
</nav>

CSS

.nav .active a span{
  padding-bottom: 5px;
  border-bottom: 1px solid #337ab7;
}
.nav .active a:hover span{
  border-bottom-color: #23527c;
}

Bootply

score 2 · Accepted Answer · answered Jun 05 '15 at 13:31

George's way will work. Another way is as follows:

Same HTML as George except remove the <span>'s:

<nav>
    <ul class="nav navbar-default">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
    </ul>
</nav>

CSS:

.nav .active a{
  padding-bottom: 5px;
text-decoration: none;
border-bottom: 1px solid #337ab7;
}

.nav .active a:hover{
  border-bottom: 1px solid #23527c;
}

Here's a stripped out fiddle: http://jsfiddle.net/samuidavid/thuLwrkf/

This will have an undesired effect in a bootstrap navigation, which is why I added the extra ``: http://www.bootply.com/myntFkyMje — George, Jun 08 '15 at 14:06

score 0 · Answer 3 · answered Jun 05 '15 at 13:00

0

you can do this trick. Use border-bottom with padding-bottom

.nav .active a {
  padding-bottom: 5px;
  text-decoration: none;
  border-bottom: 1px solid #000;
}

answered Jun 05 '15 at 13:00

iurii

4,142
2
23
28

1

That won't do what you expect. – George Jun 05 '15 at 13:01
i think there is no pure way to increase a gap between text and text-decoration – iurii Jun 05 '15 at 13:02

How to increase the gap between text and underlining on my navbar links

3 Answers3