SNSアカウントログインなどでたまにあるテキスト付きセパレータの作り方

Auth0のサイトを見ていて、ログイン画面に出てくるテキスト付きセパレータちょっとカッコいいな と思いました。

↑こんなの。

これどうやるんだろうと思ったら、divの下に「または」とテキストを書いただけのspanを組み合わせて実現していたようです。

<div class="separator">
  <span>または</span>
</div>

div.separator {
  width: 100%;
  display: flex;
  flex-direction: row;
  font-size: 12px;
  font-weight: 500; 
  margin: 0; 
  line-height: 1;
  padding: 6px 0;
}

div.separator:before, div.separator:after{
  content:"";
  flex:1 0 auto; 
  height: .5em; 
  border-bottom: 1px solid silver;
}

div.separator > span {
  text-align: center;
  flex: 0.2 0 auto;
  margin: 0;
}

やってることは簡単で

• div.separatorの前後に何もない領域を作成(div.separator:beforeおよび:afterの「content: ""」)
• div.separator自体をFlexBoxとして表示し、テキストがちょうど真ん中に表示されるようにする
• 「または」のテキストを調整する

の三つだけ。div.separatorのline-height: 1;はなにも使わない場合は不要ですが、Bootstrapを使ってる場合はhtml自体にline-heightが設定されているので、その値を打ち消すために設定します。