CSSで文字の横に線がびよーんと伸びる見出しを作成する

この記事では文字の横に線がびよーんと伸びる見出しスタイルの作成の仕方について説明します。

画像のようなスタイルです。

指定するタグ

html

<h1 class="sideLine">見出し</h1>

css

.sideLine {
 display: flex;
 align-items: center;
}
.sideLine:before,
.sideLine:after {
 content: '';
 height: 1px;
 flex-grow: 1;
 background-color: #000000;
}
.sideLine:before {
 margin-right: 20px;
}
.sideLine:after {
 margin-left: 20px;
}

タグの解説

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

見出しをdisplay:flexにすることで、要素を横並びにしています。

align-items: center;で縦の位置が中央にそろうように設定。

.sideLine:before,
.sideLine:after {
 content: '';
 height: 1px;
 flex-grow: 1;
 background-color: #000000;
}

見出しの前後に空の要素を作ります。

flex-grow: 1;で自動的に親要素全体に線が伸びるように設定。

heightを変えると線の太さが、background-colorを変えると線の色が変わります。

.sideLine:before {
 margin-right: 20px;
}
.sideLine:after {
 margin-left: 20px;
}

それぞれにmarginを設定して、文字との間の隙間を設定しています。

おまけ：scssでの指定方法

最近はスタイルをscssで作成することが多いので、scssでの指定方法も記載しておきます。

.sideLine {
 display: flex;
 align-items: center;
 &:before,
 &:after {
  content: '';
  height: 1px;
  flex-grow: 1;
  background-color: #000000;
 }
 &:before {
  margin-right: 20px;
 }
 &:after {
  margin-left: 20px;
 }
}