【CSS】テキスト(見出し，タイトル)に横線をつける方法

HTMLのコーディングで必要になり，ちょっと調べたので備忘録．

見出しなどの文字列の両側(両端，左右)に横線(ハイフン・横棒)をつけて，中央にもっていきたい場合がある．
- を使うと ------ のように切れ切れになってしまう．

テキストの真横に横線を入れる

すなわち，以下のようなデザイン．

CSS の書き方

そこで css を使って行う方法を紹介します．(サンプルコード)
HTML は

<div class="catch">
  見出し
</div>

CSS は

.catch {
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
}
.catch:before, .catch:after {
  border-top: 1px solid;
  content: "";
  width: 3em; /* 線の長さ */
}
.catch:before {
  margin-right: 1em; /* 文字の右隣 */
}
.catch:after {
  margin-left: 1em; /* 文字の左隣 */
}

ポイントは display:flex

ポイントは flex を使って，

• 線を引くのに border を使い，
• 上下の真ん中に持ってこれる align-item:center を使い，
• 左右の真ん中に持ってこれる justify-content: center を使う

ことです．

参考にさせていただいたサイト)
タイトルの左右に横線を引くCSSをなるべく簡単に考えてみた
こちらは flex-grow で全体に線を引くようになっている．
ありがとうございます．