bootstrap border-bottom links only text - css

Question

I have this menu :
<div class="navbar navbar-custom navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MyWeb</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Features</li>
<li>Downloads</li>
<li>About</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
</div>
Now I try to make a custom underline of 4 pixels but only for the text.
I tried this :
navbar-custom .navbar-nav > li > a {
border-bottom : 4px solid black ;
}
but then the border-bottom takes the whole space
How can I make it work so only the text is underlined not the whole li ?

Answer 1

You can do this:
CSS:
<style>
navbar-custom .navbar-nav > li > a {
display: inline-block;
max-width: 100px;
text-decoration: none;
}
span {
border-bottom: 4px solid;
}
</style>
HTML:
<li><a href='#'><span>Home</span></a></li>

Answer 2

see here
jsfiddle
well with bootstrap a has the padding so if you want to add the border to a and the a not to be as wide as the li , remove padding from a and add padding to li
CSS
.navbar-custom .navbar-nav > li > a {
border-bottom : 4px solid black ;
padding:0;
}
.navbar-custom .navbar-nav > li {
padding:15px;
}