CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

A CSS feature that lets you show small decorations like text or icons in front of an element without adding extra HTML.

::before

HTMLを書き足さずに、テキストやアイコンなどの小さな飾りを要素の「手前」に表示してデザインを整えるためのCSSのしくみ。

Table Of Contents

::before とは？

ざっくり言うと：

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

だと思ってください。

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

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

正確な定義

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

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

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

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

CSS

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

のように書きます。

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

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

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

HTML

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

CSS

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

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

Notice

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

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

どんなときに役立つ？

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

リストの頭にオリジナルのマーク: 例：箇条書きの前にチェックマーク ✓ を付ける
見出しの装飾: 例：見出しの左に縦線／小さい四角／ラベル風の帯を追加
ボタンの視線誘導: 例：ボタンの文字の前に矢印 → やアイコンを足す
必須項目のマーク: 例：フォームラベルの前に赤い * を出す
引用や会話風の表現: 例：引用の前に「“」マークを置く、吹き出しの三角形を描く

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

書き方の基本ルール

セレクタの形

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

CSS

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

要素名::before: 特定のタグすべてに適用（例：すべての <p> に）
.クラス名::before: 特定のクラスを持つものだけに適用
親子::before: 親子関係を組み合わせて、対象をもっと絞り込む

content はほぼ必須

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

CSS

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

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

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

CSS

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

行内か、ブロックか

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

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

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

CSS

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

よくある使い方レシピ集

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

HTML

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

CSS

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

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

メールを送信する
ファイルをアップロードする
バックアップを取る

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

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

HTML

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

CSS

.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;
}

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

見出しの左に色付きバー

HTML

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

CSS

.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;
}

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

HTML

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

CSS

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

メールアドレス

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

::before と ::after の違い

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

::before: 要素の中身の前に入る
::after: 要素の中身の後に入る

HTML

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

CSS

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

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

Text

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

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

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(...) も指定できます。

CSS

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

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

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

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

中級者向けテクニック

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

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

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

HTML

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

CSS

.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 で追加するパターンです。

HTML

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

CSS

.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; で親からはみ出さないようにする

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

CSS

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

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

Text Text

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

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

HTML

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

CSS

.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 にアニメーションをかけると、装飾だけ動かすこともできます。

HTML

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

CSS

.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 を足すときは、レイアウトに数えられるかどうかを意識します。

HTML

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

CSS

.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 でこっそり生やす」

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