h1 benutzerdefinierte border-bottom Breite statt in voller Breite

Question

Das ist, was ich brauche:

Das ist, was ich habe:

h1 { 
    border-bottom: 3px solid red; 
} 

und die Grenzen sind in voller Breite. ..

Gibt es eine nette Lösung?

Answer 1

Try-Display zu verwenden: inline-block

display: inline-block;

Example

Answer 2

Hier ist Ihre Antwort fiddle link

<div class="full-width"> 
<h1>Lorem</h1><br/> 
<h1>Loerm ipsum h1</h1><br/> 
<h1>Other Loerm ipsum h1</h1> 
</div> 

h1{ 
    border-bottom: 3px solid red; 
    display: inline-block; 
    text-align:center; 

} 
.full-width{ 
    text-align:center 
}