ヘッダーの横の線

Question

見出しの横に二重の縞模様や線を作成しようとしていますが、わかりませんでした。ここで私がこれまで持っているものです。

これは私がこれまで持っているものです。

私の目的ではなく、単一の二重線を達成することです。代わりに、勾配の

.section-heading { 
 
    display: table; 
 
    white-space: nowrap; 
 
} 
 
.section-heading:before { 
 
    background: linear-gradient(to bottom, black, black) no-repeat left center/95% 1px; 
 
    content: ""; 
 
    display: table-cell; 
 
    width: 50%; 
 
} 
 
.section-heading:after { 
 
    background: linear-gradient(to bottom, black, black) no-repeat right center/95% 1px; 
 
    content: ""; 
 
    display: table-cell; 
 
    width: 50%; 
 
}

<h2 class="section-heading" style="text-align: center;"><span style="color: #ff8916;">THE WISHLIST</span></h2>

Answer 1

、境界（または2つ）を使用します。

.section-heading { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.section-heading::after, 
 
.section-heading::before { 
 
    content: " "; 
 
    flex: 1; 
 
    height: 7px; 
 
    border-top: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
} 
 
span { 
 
    margin: 0 1em; 
 
}

<h2 class="section-heading" style="text-align: center;"><span style="color: #ff8916;">THE WISHLIST</span></h2>