CSS

::before とは？

ざっくり言うと：

「HTMLを増やさずに、要素の“手前”にちょっとした飾りや文字をくっつけるための仕組み」

だと思ってください。

• リストの頭に「・」じゃなくて「★」をつけたい
• 見出しの左に細い線や色付きのバーを出したい
• 必須入力のラベルに「＊」マークをつけたい
• ボタンの手前に「→」のような矢印アイコンを出したい

こういう「ちょっとした装飾」を、HTMLタグを追加せずに CSS だけで足せるのが ::before です。

正確な定義

::before は「擬似要素（pseudo-element）」と呼ばれるもののひとつです。

• 対象となる要素の 内容より前 に、見かけ上の「箱」を 1 つ足す
• その箱の中に入れるテキストや画像は、CSS の content プロパティで指定する
• HTML 上に本物の要素が増えるわけではなく、あくまで「見た目上だけ」の要素

という性質を持っています。

コードの見た目としては：

.selector::before {
    content: "表示したい文字";
}

のように書きます。

まずは「こう書けばOK」基本パターン

一番シンプルな使い方の例です。

見出しの前に「★」をつける

<h2 class="title">Notice</h2>

.title::before {
    content: "★";
    margin-right: 0.5em;
}

これだけで、見た目はこんなイメージになります：

ポイントはこの3つです。

1. 対象の要素にクラスをつける（ここでは class="title"）
2. CSS で .title::before { ... } と書く（セレクタ＋::before）
3. content に表示したいテキストを入れる（空だと何も出ない）

どんなときに役立つ？

よくあるパターンをざっと挙げると：

リストの頭にオリジナルのマーク

例：箇条書きの前にチェックマーク ✓ を付ける

見出しの装飾

例：見出しの左に縦線／小さい四角／ラベル風の帯を追加

ボタンの視線誘導

例：ボタンの文字の前に矢印 → やアイコンを足す

必須項目のマーク

例：フォームラベルの前に赤い * を出す

引用や会話風の表現

例：引用の前に「“」マークを置く、吹き出しの三角形を描く

こういった「見た目の装飾」にすごく向いているのが ::before です。

書き方の基本ルール

セレクタの形

よく使う形はこの3つです。

p::before { ... }
.title::before { ... }
ul li::before { ... }

要素名::before

特定のタグすべてに適用（例：すべての <p> に）

.クラス名::before

特定のクラスを持つものだけに適用

親 子::before

親子関係を組み合わせて、対象をもっと絞り込む

content はほぼ必須

::before は、基本的に content を指定しないと何も表示されません。

/* これは何も見えない */
.title::before {
    /* content がない */
    width: 8px;
    height: 8px;
    background: red;
}

「四角を出したいのに出ない…」
→ 大体 content: ""; を忘れています。

なにかしらを表示したいときは、最低限こう書いておくのが安全です。

.title::before {
    content: "";
}

行内か、ブロックか

::before は、元の要素の 表示形式 (display) に影響されます。

• 元の要素が display: inline; の場合
  → 擬似要素も基本的には文字の一部のように振る舞う
• 元の要素が display: block; の場合
  → ブロック要素の先頭に内容が差し込まれたように見える

装飾として四角や線を描きたいときは、display を明示的に変えることが多いです。

.title::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #333;
    margin-right: 0.5em;
}

よくある使い方レシピ集

箇条書きの頭に自前のマークを付ける

<ul class="checklist">
	<li>メールを送信する</li>
	<li>ファイルをアップロードする</li>
	<li>バックアップを取る</li>
</ul>

.checklist {
    list-style: none;
    padding-left: 0;
}

.checklist li::before {
    content: "✓";
    margin-right: 0.5em;
}

リストマーカーの代わりに、自分でマークを出したいときの定番パターンです。

ボタンの前に矢印アイコン

<a href="#" class="btn-next">Next</p>

.btn-next {
	display: inline-block;
	padding: 0.5em 1em;
	border-radius: 4px;
	background: #007acc;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

.btn-next::before {
	content: "▶";
	margin-right: 0.5em;
}

ボタンの名前を変えずに、視線を誘導したいときに便利です。

見出しの左に色付きバー

<h2 class="section-title">Latest Articles</h2>

.section-title {
    position: relative;
    padding-left: 0.8em;
}

.section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    bottom: 0.2em;
    width: 3px;
    background: #ff5722;
}

ここでは、::before を 縦線の装飾 として使っています。

• content: ""; … 中身のない擬似要素を出すための最低限の指定
• position: absolute; で見出しの中に固定
• top と bottom で縦方向の長さをコントロール

必須入力に赤いアスタリスクをつける

<label class="required">メールアドレス</label>

.required::before {
    content: "*";
    color: red;
    margin-right: 0.25em;
}

※ アクセシビリティの観点からは、「必須です」という情報は HTML や ARIA でもちゃんと伝える必要があります。

::before と ::after の違い

よく一緒に出てくるので、まとめてイメージしておくと理解しやすいです。

::before

要素の 中身の前 に入る

::after

要素の 中身の後 に入る

<p class="sample">Text</p>

.sample::before {
    content: "[";
}

.sample::after {
    content: "]";
}

「前につけたいか」「後ろにつけたいか」で使い分けるだけなので、深く悩まなくて大丈夫です。

よくある落とし穴・注意点

content を忘れると何も出ない

一番ありがちなのはこれです。

• width, height, background を一生懸命設定しているのに表示されない
• 実は content を書いていない

「四角や線だけ出したい場合」でも content: ""; は必要です。

困ったら content があるかどうか を真っ先にチェックしてください。

擬似要素は「子要素」ではない

::before は DOM 上の本物の要素ではありません。

• JavaScript から querySelector などで直接取得できない
• HTML の中に <before>…</before> のようなタグが出来るわけではない
• 開発ツール上では「::before」という特別なノードとして見えることが多い

あくまで「見た目用の追加パーツ」として考えるとスッキリします。

アクセシビリティ（読み上げ・意味のあるテキスト）

スクリーンリーダーなどの支援技術は、

• 一部は擬似要素の content を読み上げる
• 一部は読み上げない

など、挙動がバラバラなことがあります。

そのため、

• ボタンのラベルそのもの
  （例：「削除」ボタンに ::before で「重要」など意味のあるテキストを足す）
• 警告やエラーの文言そのもの
• 代替テキストの代わり

といった 意味の必須な情報 を ::before に入れるのはおすすめしません。

「見た目の飾り・補助のマークに留める」のが基本ルールだと思っておくと安全です。

クリック判定と重なり順（z-index）の注意

::before を position: absolute で大きく広げて使うと、元の要素の上にかぶさってしまうことがあります。

• リンクやボタンの上に透明な ::before が乗る
  → クリックできなくなる
• 逆にクリック範囲を広げるために ::before を使う
  → 期待しない挙動の元になることも

基本的に ::before は、

• 背景的な装飾（下に潜る）
  → z-index: -1 と position の指定で、少し下に送る
• 上に重ねるなら、クリック・フォーカスに影響しないか確認する

という意識で使うと事故が減ります。

画像を使うときのポイント

content には url(...) も指定できます。

.icon-link::before {
    content: url("icon.svg");
    margin-right: 0.5em;
}

ただし、レスポンシブ対応や高解像度（Retina）対応を考えると、

• background-image を使ってサイズを制御する
• mask や SVG などを使って色を変えられるようにする

といった別の手段を選んだほうが柔軟なことも多いです。

中級者向けテクニック

ここからは、少し踏み込んだ使い方です。

カウンターと組み合わせて自動番号

counter-increment と counter() を使えば、::before で自動番号を振れます。

<ol class="steps">
    <li>アカウントを作成</li>
    <li>メールを確認</li>
    <li>プロフィールを設定</li>
</ol>

.steps {
    counter-reset: step;
    list-style: none;
    padding-left: 0;
}

.steps li {
    counter-increment: step;
}

.steps li::before {
    content: counter(step) ". ";
    font-weight: bold;
}

表示イメージ：

HTML 側には番号を書かなくていいので、順番を入れ替えても自動で番号が振り直されます。

親要素全体を覆うオーバーレイ

カードや画像の上に、半透明のオーバーレイを ::before で追加するパターンです。

<div class="card">
	<img src="photo.jpg" width="300" alt="">
	<p>Text Text</p>
</div>

.card {
    position: relative;
    overflow: hidden;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

Text Text

ここでのポイント：

• inset: 0; は top: 0; right: 0; bottom: 0; left: 0; のショートハンド
• overflow: hidden; で親からはみ出さないようにする

ホバー時だけ出すこともできます。

.card::before {
    opacity: 0;
    transition: opacity 0.3s;
}

.card:hover::before {
    opacity: 1;
}

Text Text

CSS カスタムプロパティ（変数）との組み合わせ

色やテキストをカスタムプロパティで切り替えると、テーマ変更などがやりやすくなります。

<h2 class="tag-title" style="--tag-label: 'NEW';">記事タイトル</h2>

.tag-title {
    position: relative;
    padding-left: 4em;
}

.tag-title::before {
    content: var(--tag-label);
    position: absolute;
    left: 0;
    top: 0;
    padding: 0.1em 0.6em;
    border-radius: 999px;
    background: #ff4081;
    color: #fff;
    font-size: 0.75em;
}

style 属性の --tag-label を変えれば、「HOT」「PR」など簡単に切り替えられます。

アニメーションとの組み合わせ

::before にアニメーションをかけると、装飾だけ動かすこともできます。

<p class="underline-title">見出しテキスト</p>

.underline-title {
    position: relative;
    display: inline-block;
}

.underline-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.2em;
    width: 100%;
    height: 2px;
    background: #2196f3;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s;
}

.underline-title:hover::before {
    transform: scaleX(1);
}

文字はそのまま、下線だけがスッと伸びるような動きを簡単に作れます。

他のレイアウトとの組み合わせ

Flexbox と ::before

Flex 要素に ::before を足すときは、レイアウトに数えられるかどうか を意識します。

<div class="item">
	テキスト
</div>

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

.item::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #333;
    margin-right: 0.5em;
}

この場合、::before も flex アイテムのひとつとして扱われ、きれいに縦位置が揃います。

Grid と ::before

Grid のセルごとにマークをつけたい場合も ::before は有効ですが、

• セルのコンテンツ自体のレイアウトは Grid に任せる
• 追加で「セルの中の飾り」を ::before で足す

というふうに、役割を分けると考えやすいです。

まとめと覚え方

最後に、要点だけをギュッとまとめます。

• ::before は「要素の中身の前にくっつく見た目用の箱」
• HTML を増やさずに、マークやアイコン、線などを追加できる
• content はほぼ必須（四角だけでも content: ""; を忘れない）
• 意味のあるテキストや必須情報は入れないのが安全（飾りにとどめる）
• 中級者以上は、カウンター・オーバーレイ・アニメーション・変数との組み合わせで本領発揮

イメージとしては、

「見た目だけの“前置きパーツ”を CSS でこっそり生やす」

くらいに覚えておくと、実務でもかなり使いどころが見えてきます。