Wie man eine horizontale Linie vor und nach einer Überschrift in css

Question

anzeigen Ich versuche, eine HTML-Überschrift in CSS zu stylen, aber bekomme nicht das richtige Ergebnis, wie meine JSfiddle zeigt: https://jsfiddle.net/Nadjanara/nmo0245t/. Im Folgenden ist der HTML und CSS-Codes:

<h2><span>Heading2</span></h2> 

h2{ 
    width:100%; 
    text-align:center; 
    border-bottom: 1px solid #000; 
    line-height:0.1em; margin:10px 0 20px; 
} 
h2 span{ 
    padding:0 10px; 
} 

Wie kann ich nur die horizontale Linie vor setzen und nach der Überschrift und steuert auch die Breite der Linie, so dass solche belegen nicht die volle Breite des Bildschirm?

Answer 1

Es gibt offensichtlich viele Möglichkeiten, wie Sie erreichen können, wonach Sie suchen. Aber wie wäre es mit etwas wie this?

h1 { 
 
    font-size: 4rem; 
 
} 
 
h1::before, 
 
h1::after { 
 
    display: inline-block; 
 
    content: ""; 
 
    border-top: .3rem solid black; 
 
    width: 4rem; 
 
    margin: 0 1rem; 
 
    transform: translateY(-1rem); 
 
}

<h1>Heading</h1>

Answer 2

Probieren Sie es aus! Ein pseduo-Element ist hier die beste Wahl. Sie können die Breite der Linie ändern, wie auch immer Sie es brauchen, aber für dieses Beispiel habe ich 500px verwendet.

h2{ 
    text-align:center; 
    line-height:0.1em; 
    position:relative; 
    margin:10px 0 20px; 
    background:#FFF; 
} 
h2 span{ 
    background:#FFF; 
    z-index:2; 
    position: relative; 
} 
h2:before{ 
    content:''; 
    position:absolute; 
    display:block; 
    top:50%; 
    height:1px; 
    width: 500px; 
    background:#000; 
    left:50%; 
    z-index:1; 
    transform:translateX(-50%); 
    -webkit-transform:translateX(-50%); 
}