【CSS】テキストの左右いっぱいにラインを引く方法

見出しなどのテキストの両端にラインを入れる方法です。
以前は、spanなどを入れ子にして実装していましたが、疑似要素をflexboxで配置することで、簡単に実装できます。

実装サンプル

HTML

<h2>Topics</h2>

CSS

h2{
   color: #545454;
   display: flex;
   align-items: center;
   font-size: 26px;
   font-weight: bold;
   letter-spacing: 0.05em;
}
h2::before,
h2::after{
   content: "";
   height: 1px;
   flex-grow: 1;
   background-color: #545454;
}
h2::before {
   margin-right: 20px;
}
h2::after {
   margin-left: 20px;
}

flex-growプロパティを使用して、h2の左右の余白を、（flex-grow: 1の指定）1：1の比率で分配します。

ちなみに、両端いっぱいにしない場合

両端いっぱいにせず、ラインの横幅が決まっている場合は、中央寄せにし、横幅のサイズを指定するだけです。
（※flex-growの指定は外します）

CSS

h2{
   color: #545454;
   display: flex;
   align-items: center;
   justify-content: center;/*中央寄せにする*/
   font-size: 26px;
   font-weight: bold;
   letter-spacing: 0.05em;
}
h2::before,
h2::after{
   content: "";
   height: 1px;
   width: 100px;/*左右のラインの横幅を指定*/
   background-color: #545454;
}
h2::before {
   margin-right: 20px;
}
h2::after {
   margin-left: 20px;
}