テキストの左右に横線（ボーダー）を表示するCSSパーツ

コピペで使えるパーツのご紹介です。
今回はテキストの左右にボーダーを表示するパーツをご紹介します。

目次

• 実際のコード

  • 実装の結果

• 応用編：カスタマイズ

  • 応用編を実装した結果

• 最後に

実際のコード

<p class="ttl">テキストの横に線だよ</p>

.ttl {
  & {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 350px;
   margin: 0 auto;
   font-size: 20px;
  }
  &:before, &:after {
    content: "";
    display: block;
    height: 3px;
    background: #000;
    flex-grow: 1;
  }
  &:after {
    margin-right: 12px;
  }
  &:before {
    margin-left: 12px;
  }
}

なお、Sassを利用せずにCSSで作成する場合は以下のとおりです。

.ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 350px;
  margin: 0 auto;
}

.ttl:before, .ttl:after {
  content: "";
  display: block;
  height: 2px;
  background: #000;
  flex-grow: 1;
}

.ttl:before {
  margin-right: 12px;
}

.ttl:after {
  margin-left: 12px;
}

実装の結果

デモページで確認する

応用編：カスタマイズ

// afterだけに設定すれば、右側にのみボーダーが表示
.ttl {
  & {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 350px;
   margin: 0 auto;
   font-size: 20px;
  }
  &:after {
    content: "";
    display: block;
    height: 3px;
    background: #000;
    flex-grow: 1;
    margin-left: 12px;
  }
}

応用編を実装した結果

デモページで確認する

最後に

疑似要素であるbeforeとafterを使えばかんたんに実装できました。
他にもこれらを利用することで応用できますので、是非色々試してみてください。