どのようにテキストを通過するダブルラインの効果は得られますか？説明内の画像

Question

私はthisという見出しのテキストに対してスタイリングが行われていることがわかりました。これは、テキストを通り抜けているがそれと重複していない二重の境界です。誰も私のh1要素に同じことをする方法を知っていますか？

Answer 1

迅速かつ汚いソリューション：

h1 { 
 
     position: relative; 
 
     text-align: center; 
 
    } 
 
    h1:before { 
 
     content: " "; 
 
     position: absolute; 
 
     height: 6px; 
 
     width: 40%; 
 
     border-top: 1px solid black; 
 
     border-bottom: 1px solid black; 
 
     left: 0; 
 
     top: 40%; 
 
    } 
 
    h1:after { 
 
     content: " "; 
 
     position: absolute; 
 
     height: 6px; 
 
     width: 40%; 
 
     border-top: 1px solid black; 
 
     border-bottom: 1px solid black; 
 
     right: 0; 
 
     top: 40%; 
 
    }

<h1>Title</h1>