疑似要素を含む見出しを設計する

Question

問題を示すために私は小さなペンをCodePenで作成しました。見ていると最も簡単だと思います。

hereです。

基本的には、見出しの前後に擬似要素を配置し、側面から来てテキストで割り込まれた1ピクセルの高さの線を表示する方法を探しています。

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

テキストが長い（または表示が小さい）場合、テキストは2行に折り返されます。次に、左の行はまだ冒頭の隣にあり、右の部分は最後の隣にとどまります。

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

私の理想は、残念ながら、私は

Answer 1

は、線を描画するために擬似要素を使って、それに50を配置...これを取得することができませんよ、この

______________________________ More text that will cover _________________________ 
            multiple lines 

ようなものになるだろうテキストが2行になっても、テキストの中央に保持する方法として、上端または下端から％を使用します。

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>