【CSS】コピペOK！文字の左右にbeforeとafterで線を引く方法

見出しなどで文字の左右に装飾用の線を引きたいときのやり方です。CSSの擬似要素、beforeとafterを使います。

文字の左右に線を引くサンプル

コピペはこちらから

<div class="title">宝塚歌劇　雪組公演</div>

.title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
  font-weight: 700;
  color: #053D69;
}
.title::before,
.title::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: #053D69;
}
.title::before {
  margin-right: 1em;
}
.title::after {
  margin-left: 1em;
}

【ざっくり解説】文字の左右に線を引く方法

beforeとafterで線を作る

まずは要素の前と後ろに線を作るために、擬似要素のbeforeとafterを使います。それぞれ高さを1pxのブロックにすることで線のように見せています。

.title::before,
.title::after {
  content: '';
  display: block;
  width: 90px;
  height: 1px;
  background: #053D69;
}

元の要素、before、afterの3つを横並びにする

擬似要素を追加しただけだと線が上下に位置することになるので、display: flexを使ってこの3つを横並びにします。

.title {
  display: flex;
}

線を文字の高さの中央に配置する

あとは文字のちょうど半分の高さに線を持っていきたいのでalign-items: centerを指定して縦位置を中央にします。また、全体の横位置を中央揃えにするためにjustify-content: centerも追加。

.title {
  display: flex;
  align-items: center;
  justify-content: center;
}

文字と線の間の余白を作る

最後に、beforeの右側とafterの左側にmarginで余白を設けたら完成。

.title::before {
  margin-right: 1em;
}
.title::after {
  margin-left: 1em;
}

まとめ

beforeとafterを文字通りに「前後」の位置で使うという、シンプルなところが良いです。