【CSS】文字の左右にbeforeとafterで線を引く方法

■2026年1月：加筆修正を行いました。

見出しなどで文字の左右に装飾用の線を引きたいときのやり方です。いろいろやり方はありますが今回はCSSの擬似要素、beforeとafterを使って作ってみましょう。

目次

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

ここがタイトルです

コードはこちら

<div class="title">ここがタイトルです</div>
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  font-weight: 700;
  color: #053D69;
}
.title::before,
.title::after {
  content: '';
  display: block;
  width: 80px;
  height: 2px;
  background: #053D69;
}
.title::before {
  margin-right: 0.5em;
}
.title::after {
  margin-left: 0.5em;
}

文字の左右に線を引く方法

beforeとafterで線を作る

まずは要素の前と後ろに線を作るために、擬似要素のbeforeとafterを使います。線はborderで作るのではなく、高さ2pxのブロックにすることで線のように見せています。線の長さ（横幅）もここで指定。

ここがタイトルです

.title::before,
.title::after {
  content: '';
  display: block;
  width: 90px;
  height: 2px;
  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: 0.5em;
}
.title::after {
  margin-left: 0.5em;
}

まとめ

beforeとafterを文字通りに前後の位置で使うところがポイントです。もちろん、線以外でも飾りの画像を左右に配置したい場合などもbeforeとafterを使って実現できるので、いろいろ応用してみてくださいね。

関連記事