::before や ::after などの疑似要素とは何ですか?

Question

Accepted Answer

**疑似要素**（ダブルコロン `::` ）は、要素の特定の*部分*をスタイル設定するか、HTML に含まれていない**コンテンツを生成します**。追加のマークアップを追加せずに行えます。 ## なぜ重要なのか ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` `content` プロパティは必須です。これがないと疑似要素はレンダリングされません。生成されたコンテンツは要素の最初（ `::before` ）または最後（ `::after` ）の子です。 ## 追加の div なしで装飾図形を描く ```css .tooltip::after { content: ""; /* empty but present → creates a box */ position: absolute; border: 8px solid transparent; border-top-color: black; /* a CSS triangle (tooltip arrow) */ } ``` これは古典的な用途です。矢印、バッジ、オーバーレイ、装飾線を描画します。HTML を純粋に視覚的な要素から清潔に保ちます。 ## 他の疑似要素（要素の一部をスタイル設定） ```css p::first-line { font-weight: bold; } /* the first rendered line */ p::first-letter { font-size: 3em; } /* drop cap */ ::selection { background: yellow; } /* highlighted/selected text */ input::placeholder { color: gray; } /* placeholder text */ ``` ## 1 つのコロン vs 2 つのコロン ```css .x:hover { } /* pseudo-CLASS (state) — one colon */ .x::before { } /* pseudo-ELEMENT (a part) — two colons */ ``` CSS3 は疑似要素を疑似クラスと区別するために `::` を導入しました（ブラウザーは互換性のため古い方でシングルコロンを受け入れますが、 `::` を使用してください）。 ## アクセシビリティに関する注記生成された `content` は一部のスクリーンリーダーで読み取られます。重要な情報を `::before`/`::after` にのみ配置しないでください（装飾に使用してください）。装飾アイコンはアクセシビリティツリーから除外するのが最適です。 ## なぜ重要なのか疑似要素を使用すると、アイコン、装飾図形（矢印、区切り線）、ドロップキャップ、カウンターを純粋に CSS で追加できます。追加の `

` や `` は不要です。マークアップをセマンティックに保ちながら豊富なビジュアルディテールを実現でき、クリーンで保守性の高いスタイリングの基本です。