2018/01/26

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

以前はposition: absolutedisplay: 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

0 件のコメント :

コメントを投稿