🙆‍♀️

【CSS入門】::afterで見出しに線を引く方法をわかりやすく解説"emoji: "🪄

に公開
CSS
HTML
tech

【CSS入門】::afterで見出しに線を引く方法をわかりやすく解説

見出し（タイトル）の下に、ちょっとした「線の装飾」を入れたいとき、
よく使われるのが ::after 疑似要素です。

この記事では、次のコードを使って、どんな仕組みで線を作っているのかをわかりやすく解説します。

💡 完成コード

.section-title::after {
  content: "";
  width: 40px;
  height: 1px;
  background-color: #000;
  display: block;
}

🧩 コードの解説

行 内容 説明
.section-title::after 疑似要素の指定 .section-title 要素の後ろに装飾用の要素を作ります。
content: ""; 空の要素を作る 疑似要素を表示するために必ず必要。空でもOKです。
width: 40px; 幅の指定 線の長さを40pxに設定します。
height: 1px; 高さの指定 線の太さを1pxに設定します。
background-color: #000; 色指定 線の色を黒（#000）に設定します。
display: block; ブロック化 幅・高さを有効にするための設定です。

🎨 実際の見た目

<h2 class="section-title">NEWS</h2>

このHTMLに先ほどのCSSを当てると、下のような見た目になります。

NEWS
────

「::after」で作られた装飾が、見出しの下に黒い線として表示されます。

🪄 よくある応用パターン

① 中央寄せの線

.section-title {
  text-align: center;
}

.section-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background-color: #000;
  margin: 8px auto 0; /* 上に余白8px、左右中央寄せ */
}

➡ 見出しの下に「中央に短い線」が表示されます。

② 左寄せの線（デフォルト）

.section-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background-color: #000;
  margin-top: 8px;
}

➡ 見出しの左下に短い線が表示されます。
より強調したい場合は height を2pxや3pxにしてもOKです。

③ 下線タイプ（テキスト全体に線を引く）

.section-title {
  display: inline-block;
  border-bottom: 1px solid #000;
  padding-bottom: 4px;
}

➡ ::after を使わず、単純に border-bottom で線を引く方法です。
短いテキストタイトルの場合はこちらの方がシンプルです。

🧠 ::afterとは？

::after は、指定した要素の後ろに「見た目だけの要素」を追加するためのCSS疑似要素です。
HTMLには書かれていませんが、CSSだけで新しい装飾を追加できます。

主な用途

  • タイトル下の装飾線
  • 吹き出しやリボンなどの装飾
  • 箇条書きのアイコン追加
  • ホバー時のアニメーション効果 など

💬 よくある疑問

Q. content: ""; はなぜ必要？

A. 疑似要素は、content プロパティがないと表示されません。
空でも良いので必ず書く必要があります。

Q. display: block; の理由は？

A. デフォルトではインライン要素のため、width や height が効きません。
ブロック化することでサイズを持たせています。

🧭 まとめ

要素 役割
::after 要素の後ろに装飾を追加
content: "" 疑似要素を生成するために必要
width, height 線のサイズを指定
background-color 線の色を指定
display: block サイズを有効化

📌 一言まとめ

::after はHTMLを汚さずに「見出し下に線を引く」便利なCSSテクニック！

👋 おまけ：デザインのコツ

  • 線の色は文字色と合わせると統一感が出ます
  • 幅を短くすると上品に、長くすると印象的に見せられます
  • transition を加えてホバー時に伸びるアニメーションにするのもおすすめ

Discussion