テキストの左右に２本線を引きたいです

Question

テキストの左右に線を引きたいです。

１本の実線の作り方はわかりますが
この線を２本にしたい場合どうしたら良いでしょうか？

＝テキスト＝

といったような２本の線です。

    <p class="title01">タイトル</p>

.title01{
  display:flex;
  align-items:center;
}
.title01::before,
.title01::after{
  content:"";
  height: 7px;
  flex-grow:1;
  background-color: tomato;
}

.title01::before{
  margin-right:1rem;

}


.title01::after{
  margin-left: 1rem;
}

Answer 1

これでどうでしょう？

.title01::before,
.title01::after{
  content:"";
  height: 3px;
  flex-grow:1;
  border-top: 1px solid tomato;
  border-bottom: 1px solid tomato;
}

Comments

[chocon]

ありがとう御座います。

.title01::before,
.title01::after{
content:"";
height: 3px;
flex-grow:1;
background-color: tomato;
border-top: 1px solid tomato;
border-bottom: 1px solid #333333;
}

としましたが、
border-topと border-bottomの間に余白欲しい場合どうしたらいいでしょうか・・・

[umau]

background-color がtomato、border-topもtomatoなので余白が無いように見えてるだけだと思います。
background-colorを消して、heightの3pxをお好きなサイズにすれば変わりませんか？

[chocon]

ありがとう御座います！
理解できました！！