css - ヘッダー CSS の後ろに 2 行

Question

Web サイトのヘッダーの後ろに 2 行を追加したいと考えています。CSS がテキストの後ろに 1 本の実線を配置することを発見しましたが、テキストの後ろに幅の異なる 2 本の線 (間にスペースを入れて少し太い線) を配置したいと考えています。

このコードを調整して、テキストの後ろに 2 行を表示できるようにする方法を知っている人はいますか?

h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}

HTMLは次のとおりです。

<h1>Header Title Goes Here</h1>

そして、このコードを調整するだけの簡単なものではない場合、この効果を得るために使用できる CSS メソッドはありますか?