AlexGH AlexGH - 2 days ago 4
CSS Question

Edit Header's Border-Bottom length

how could I set the border-bottom length of a header to a little bit longer than the text?
With this code it takes all the page length:

<div style="position:relative;">
<h3 style="text-align:center; border-bottom:solid;">This is a test</h3>
</div>


I've tried this code too:

<div style="position:relative;">
<h3 style="text-align:center;"><span style="border-bottom:solid;"> This is a test</span></h3>
</div>


But with the last code it takes exactly the length of the text, how could I set the border-bottom length a little bit longer than that?

Answer

Use padding on the left & right on <h3>. Have a look at the snippet below:

.text-holder {
  text-align: center;
}

.text {
  display: inline-block;
  padding: 0 10px;
  border-bottom: 3px solid;
}
<div class="text-holder">
    <h3 class="text">This is a test</h3>       
</div>

Hope this helps!

Comments