::beforeと::afterの違いを学ぶ！h2見出しにアイコンを付けよう

2 まずは「::before」と「::after」ってなに？

「::before」と「::after」は、HTMLの中には存在しない“仮想の要素”を作り出すCSSの機能です。
要素の前後に「おまけ的な内容（飾り・アイコン・文字）」を追加できるんですね。

h2::before {
  content: "★";
}
h2::after {
  content: "☆";
}

すると、こんな風に表示されます 👇

HTML側には何も書いていません。
つまり、CSSだけで「前」と「後ろ」に装飾を足せるのが ::before と ::after の魅力です！

3 :before と ::before の違い

ここでよく出てくる疑問が「コロンが1つと2つ、何が違うの？」という点ですね。ズバリ、こう覚えてください👇

動作はどちらも同じですが、CSS3から「疑似クラス（:hoverなど）」と「疑似要素（::beforeなど）」を区別するためにコロンが2つになりました。
つまり これから書くなら ::before / ::after が正解 です！

4 実践！h2見出しにアイコンを付けてみよう

では実際に、h2見出しにアイコンを表示してみましょう。
以下のコードをそのままコピペしてOKです！

<h2 class="icon-heading">CSSでアイコン付き見出しを作ろう！</h2>

/* -----------------------------
 * ::beforeと::afterの違いを学ぶ
----------------------------- */

/* 記事見出し用アイコン付きデザイン */
.icon-heading { /* 見出し全体の装飾 */
  position: relative; /* アイコンの位置調整に必要 */
  padding: 0.5em 0.8em 0.5em 2em; /* 左に余白を多めに確保（アイコン分） */
  background: #f0f8ff; /* 背景色（淡い青） */
  border-left: 6px solid #2196f3; /* 左側に青いラインを追加 */
  font-weight: bold; /* 見出し文字を太字に */
} 

/* 左側にアイコン */
.icon-heading::before { /* 疑似要素で左アイコンを配置 */
    font-family: "Font Awesome 6 Free"; /* Font Awesomeを指定 */
    font-weight: 900; /* solidアイコン用 */
    content: "\f0a4"; /* アイコンコード（例：矢印） */
    position: absolute; /* 見出し内で絶対配置 */
    left: 0.6em; /* 左からの距離 */
    top: 50%; /* 縦方向の中央揃え */
    transform: translateY(-50%); /* 完全に中央に */
    font-size: 1.2em; /* アイコンサイズ */
} 

/* 右側にアイコン */
.icon-heading::after { /* 疑似要素で右側のアイコンを追加 */
    font-family: "Font Awesome 6 Free"; /* Font Awesomeを指定 */
    font-weight: 900; /* solidアイコン用 */
    content: "\f024"; /* アイコンコード（例：タグ） */
    margin-left: 0.4em; /* テキストとの間に余白 */
} 

このように表示されます👇

CSSでアイコン付き見出しを作ろう！

シンプルだけど、見出しがぐっと引き立ちますね！
Font AwesomeアイコンやSVG画像をcontentに指定する応用もできますよ✨

5 ::before / ::after の活用アイデア

• 見出しの両端に線や記号を入れて「タイトル感」を出す
• ボタンの左に矢印やアイコンを追加する
• 吹き出しの三角部分を::beforeで作る
• 引用文に装飾をつけてデザイン性アップ

HTMLを汚さず、CSSだけで装飾を追加できるのがポイントです。
特にブログや企業サイトの「デザイン統一」にとても便利です。

6 まとめ

• ::before と ::after は “仮想要素” を作るCSSの魔法！
• :before / :after は古い書き方。新しいサイトでは使わない
• ::before は要素の「前」、::after は「後ろ」に装飾を追加
• HTMLを変えずにデザインできる＝とても効率的✨

まずは h2::before と h2::after を触ってみて、いろいろ遊んでみましょう！
CSSは“実験して覚える”のが一番です！