Flexboxを疑似要素（::before, ::after）で使う方法（例: タイトルのスタイリング）

以前はposition: absoluteやdisplay: table-cellをつかっていた上下中央揃え、float: leftをつかっていた横並び。
これらがすべてFlexboxで実現できるようになって久しいが、CSSをいじっているときに擬似要素に対してFlexboxが使えないかと試していたらできたので、よくあるタイトルのスタイリングを例にとり紹介する。

疑似要素をFlexboxで並べる

タイトルのスタイリングでよくある、前後にラインをつけるやつ。

これを疑似要素とFlexboxをつかって再現する。

<h1 class="flex">Title styling</h1>

.flex {
  display: flex;
  align-items: center;
}

.flex::before,
.flex::after {
  display: block;
  content: ' ';
  
  flex-grow: 1;
  margin: 0 1em;
  height: 2px;
  
  background-color: #9F9F9F;
}

メインとなる要素（この例ではh1タグ）でdisplay: flexを指定する。
次に、.flexクラスの疑似要素（::before、::after）をdisplay: blockで表示する。
これだけで「Title styling」という文字とラインが横並びになる。

このままではすべて上寄せになってしまうので、align-items: centerを指定して上下中央寄せにする。

あとはラインをウィンドウの幅にあわせて伸ばすためにflex-growでwidthの比率を指定する。


これで完成！

疑似要素でも他の要素（たとえばdivとか）と同様にFlexboxでスタイリングできた。



以上

written by @bc_rikko