Как я могу добиться эффекта двойной линии, проходящей через какой-то текст, но не поверх нее? Изображение в поле

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>