Bottom border with the same width from text value on css - html

Question

I have an issue, I am trying to add 1 px to an underlined text, but researching a lot on the web I found that the only way was adding a border and a padding bottom
But the width is longer than the word and I want that the effect is the same form a underline effect, cropped with the word width.
Here is my fiddle
https://jsfiddle.net/0orb5h4s/1/
And my try to the selected underline class
/* Underline Issue */
.selected {
border-bottom: 1px solid #000;
/* text-decoration: underline; */
padding-bottom: 1px;
}

Answer 1

I think a span here is what you are looking for:
.horizontal-tabs li {
display: inline;
list-style-type: none;
padding-right: 10px;
padding-left: 10px;
}
.horizontal1,
.horizontal2 {
border-left: 1px solid #000;
}
/* Underline Issue */
.selected span {
text-decoration: underline;
}
<div class="tabs">
<ul class="horizontal-tabs">
<li class="horizontal0">Description</li>
<li class="horizontal1">Product Care</li>
<li class="horizontal2 selected"><span>Shipping Information</span>
</li>
</ul>
</div>
If you are actually looking to distance the underline from the text then you previous technique still works if you use the span as mentioned before.
.horizontal-tabs li {
display: inline;
list-style-type: none;
padding-right: 10px;
padding-left: 10px;
}
.horizontal1,
.horizontal2 {
border-left: 1px solid #000;
}
/* Underline Issue */
.selected span {
border-bottom: 1px solid #000;
padding-bottom: 1px;
}
<div class="tabs">
<ul class="horizontal-tabs">
<li class="horizontal0">Description</li>
<li class="horizontal1">Product Care</li>
<li class="horizontal2 selected"><span>Shipping Information</span>
</li>
</ul>
</div>

Answer 2

If you add a span inside your li elements you could use the border style on the span element instead. I edited your fiddle code and removed some unnecessary classes that you were using for setting the border-left style.
HTML
<div class="tabs">
<ul class="horizontal-tabs">
<li><span>Description</span></li>
<li><span>Product Care</span></li>
<li class="selected"><span>Shipping Information</span></li>
</ul>
</div>
CSS
.horizontal-tabs li {
display: inline-block;
list-style-type: none;
padding-right: 10px;
padding-left: 10px;
border-left: 1px solid #000;
}
/* This removes the first border */
.horizontal-tabs li:first-child {
border-left: none;
}
/* Underline Issue */
.horizontal-tabs li.selected span {
border-bottom: 1px solid #000;
padding-bottom: 1px;
display: inline-block;
}
JSFiddle

Answer 3

Here is an answer - https://jsfiddle.net/0orb5h4s/6/
Just added
.selected span {
border-bottom: 1px solid #000;
}
and
<li class="horizontal2 selected"><span>Shipping Information</span></li>
and removed the bottom border from the selected li.
The border applies to the padding as well and that's why adding a span moves the border to the content inside the padding.

Answer 4

Why don't you add a span?
HTML
<div class="tabs">
<ul class="horizontal-tabs">
<li class="horizontal0">Description</li>
<li class="horizontal1">Product Care</li>
<li class="horizontal2 selected">
<span>Shipping Information</span>
</li>
</ul>
</div>
CSS
.selected span {
border-bottom: 1px solid #000;
padding-bottom: 5px;
}
You can check my solution here: https://jsfiddle.net/lordfox/0orb5h4s/4/
Hope that helps! :)