CSS疑似要素::before・::afterの実践的活用：モダンなWebデザインを効率化する実装テクニック

2026年5月16日

セレクタ

Webデザインのフロントエンド開発において、HTML構造を汚さずに装飾や機能的な補足を行う技術は非常に重要です。

CSSの疑似要素である「::before」と「::after」は、その中核を担う強力なツールとして長年愛用されています。

モダンなWeb制作の現場では、単なるアイコンの表示だけでなく、アクセシビリティやパフォーマンスを考慮した高度な実装が求められます。

本記事では、2026年現在の最新トレンドを踏まえつつ、疑似要素を活用してコーディングを効率化する実践的なテクニックを詳しく解説します。

目次 [ close ]

CSS疑似要素の基礎：::beforeと::afterとは何か

疑似要素とは、HTMLのソースコード上には存在しない要素を、CSSによって仮想的に生成する仕組みのことです。

特に「::before」と「::after」は、対象となる要素の直前や直後にコンテンツを挿入するために使用されます。

これらを利用することで、HTMLをシンプルに保ちながら、複雑なデザイン装飾を実現できるのが最大のメリットです。

マークアップのセマンティクス（意味論）を損なうことなく、デザイン上の必要性だけで要素を追加したい場合に最適です。

疑似要素の基本構文と必須プロパティ

疑似要素を使用する際には、必ずcontentプロパティを記述しなければなりません。

たとえ表示するテキストがない場合でも、content: "";のように空の値を指定する必要があります。

この指定を忘れると、疑似要素自体がブラウザ上にレンダリングされないため注意が必要です。

また、疑似要素はデフォルトで「インライン要素」として扱われます。

幅や高さを指定して図形のように扱いたい場合は、display: block;やdisplay: inline-block;に変更する必要があります。

CSS

/* 基本的な記述例 */
.sample-element::before {
    content: "【重要】"; /* 挿入するテキスト */
    color: red;
    font-weight: bold;
}

.sample-element::after {
    content: ""; /* 空のコンテンツ */
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: blue;
    border-radius: 50%;
}

コロンの数（: と ::）の違いについて

CSS3以降の仕様では、疑似要素には二重コロン（::）を使用することが推奨されています。

これは、:hoverや:focusといった「疑似クラス」と区別するためです。

古いブラウザとの互換性のために単一コロン（:）が使われることもありますが、現代のWeb開発では「::」を用いるのが標準的なマナーとなっています。

実践的な活用シーン：デザインを効率化する実装例

ここからは、実際のプロジェクトで頻繁に使用される具体的な実装パターンを紹介します。

1. アイコンフォントやWebフォントの挿入

ナビゲーションメニューやリンクボタンにアイコンを付与する場合、疑似要素は非常に便利です。

HTML内に<i>タグを大量に並べる必要がなくなり、管理が容易になります。

CSS

/* 外部リンクにアイコンを自動付与する例 */
.external-link::after {
    content: "\f08e"; /* Font Awesome等のアイコンコード */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 8px;
    font-size: 0.9em;
}

2. 装飾的なボーダーや下線の作成

見出しのデザインにおいて、テキストの下に短い線を引きたい場合があります。

border-bottomでは要素の幅いっぱいに線が引かれてしまいますが、疑似要素なら自由自在に調整可能です。

CSS

/* 中央揃えの見出しに短い下線を引く */
.heading-decorated {
    position: relative;
    text-align: center;
    padding-bottom: 15px;
}

.heading-decorated::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: #007bff;
}

3. リスト項目のカスタマイズ（カスタムバレット）

ulやolのデフォルトのポチ（中黒）を独自のデザインに変更したい場合も、疑似要素が活躍します。

list-style: none;でデフォルトを消去してから、::beforeで独自の記号を配置します。

CSS

.custom-list {
    list-style: none;
    padding: 0;
}

.custom-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}

.custom-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}

モダンなテクニック：2026年のトレンドを反映した活用法

CSSの進化に伴い、疑似要素の使い道もより高度になっています。

特にカスタムプロパティ（CSS変数）や、新しいレイアウト手法との組み合わせが注目されています。

attr()関数を用いた動的なコンテンツ表示

HTMLの属性値を疑似要素のcontentとして取得する手法は、ツールチップなどの実装に役立ちます。

これまでJavaScriptが必要だった一部の機能を、CSSだけで完結させることができます。

HTML

<!-- HTML側 -->
<span class="tooltip" data-hint="ここをクリックして詳細を確認">ヘルプ</span>

CSS

/* CSS側 */
.tooltip {
    position: relative;
    cursor: pointer;
    text-decoration: underline dotted;
}

.tooltip:hover::after {
    content: attr(data-hint);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
}

CSSグリッド・フレックスボックスとの組み合わせ

疑似要素をグリッドアイテムとして扱うことも可能です。

例えば、画像の上にオーバーレイを重ねる際、疑似要素をgrid-areaで配置することで、複雑な重なり順をスマートに制御できます。

position: absolute;を使わずに要素を重ねることができるケースも増えており、レイアウトの柔軟性が向上しています。

アクセシビリティへの配慮と注意点

疑似要素を使用する際、最も注意しなければならないのがアクセシビリティの問題です。

スクリーンリーダーなどの音声読み上げソフトは、疑似要素内のテキストを読み上げることがあります。

装飾目的の記号（「>>」や「★」など）が読み上げられてしまうと、ユーザーの混乱を招く可能性があります。

重要な情報は疑似要素ではなく、必ずHTML本体に記述するようにしましょう。

検索エンジン最適化（SEO）への影響

Googleなどの検索エンジンは、現在ではCSS疑似要素によって挿入されたテキストをある程度認識できると言われています。

しかし、SEO上の重要なキーワードを疑似要素に含めるのは推奨されません。

あくまで「補助的な情報」や「デザインパーツ」として割り切って使用するのが、堅実なアプローチです。

用途	推奨される内容	非推奨な内容
装飾	背景色、アイコン、引用符	特になし
補足情報	「New!」ラベル、単位（円、％）	重要な警告文
ナビゲーション	矢印アイコン	リンク先テキスト

開発効率を上げるデバッグのコツ

疑似要素はHTMLソースに直接記述されていないため、トラブルシューティングに戸惑うことがあります。

ブラウザのデベロッパーツール（開発者ツール）を使いこなすことが、解決への近道です。

デベロッパーツールでの確認方法

ChromeやEdgeのデベロッパーツールでは、対象要素のツリーを展開すると::beforeや::afterという項目が表示されます。

ここを選択することで、適用されているスタイルをリアルタイムで編集・確認できます。

もし表示されない場合は、contentプロパティが設定されているか、あるいはdisplay設定が適切かを確認してください。

要素が重なり合って見えない場合は、一時的にbackground-color: red;などを指定して、領域を可視化するのも有効な手段です。

よくあるミスと解決策

初心者が陥りやすいミスとして、z-indexの挙動が挙げられます。

疑似要素にz-indexを適用したい場合、その親要素にposition: relative;（またはその他の位置指定）が必要です。

また、疑似要素は親要素の背面に配置したい場合、z-index: -1;を指定しますが、親要素に背景色が設定されていると隠れてしまうことがあります。

この場合、親要素のスタック文脈（Stacking Context）を調整するためにisolation: isolate;プロパティを活用すると便利です。

CSS

/* 親要素の背面に装飾を置くモダンな解決策 */
.parent {
    position: relative;
    isolation: isolate; /* 新しいスタック文脈を作成 */
}

.parent::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.1);
    z-index: -1; /* 親の背景よりも前、コンテンツよりも後ろになる */
}