AlexGH AlexGH - 1 year ago 74
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>

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>

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 Source

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>       

Hope this helps!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download