Entwerfen Sie eine Überschrift mit Pseudo-Elementen

Question

Ich machte einen kleinen Stift auf CodePen, um das Problem zu zeigen, und ich denke, es ist am einfachsten, wenn Sie es sich ansehen. Sie können es here finden.

Grundsätzlich suche ich nach einer Möglichkeit, Pseudoelemente vor und nach einer Überschrift zu haben, um eine 1px Höhe Zeile anzuzeigen, die von den Seiten kommt und durch den Text unterbrochen wird.

-------------------------------------- Text -------------------------------------- 

Wenn der Text lang ist (oder die Anzeige klein), wird der Text in zwei Zeilen umgebrochen. Dann ist die linke Linie immer noch neben dem Anfang und der rechte Teil wird neben dem Ende bleiben.

------------------------------ More text that will cover 
            multiple lines ------------------------------ 

Mein Ideal wäre leider so etwas wie dieses

______________________________ More text that will cover _________________________ 
            multiple lines 

sein, ich bin nicht in der Lage, dies zu bekommen ...

Answer 1

Verwendung eines Pseudo-Element die Linie zu zeichnen, und positionieren 50 % von oben oder unten, um es in der Mitte des Textes zu halten, auch wenn der Text in 2 Zeilen unterteilt ist.

h5 { 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
h5:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    background: #000; 
 
    height: 1px; 
 
    left: 0; right: 0; 
 
} 
 

 
span { 
 
    background: #FFF; 
 
    padding: 0 10px; 
 
    position: relative; 
 
    text-align: center; 
 
    display: inline-block; 
 
}

<h5><span>This is<br>some text</span></h5>