疑似要素(ダブルコロン :: )は、要素の特定の部分をスタイル設定するか、HTML に含まれていないコンテンツを生成します。追加のマークアップを追加せずに行えます。
なぜ重要なのか
css
.note::before {
content: ;
}
{
: ;
}
content プロパティは必須です。これがないと疑似要素はレンダリングされません。生成されたコンテンツは要素の最初( ::before )または最後( ::after )の子です。
.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 を純粋に視覚的な要素から清潔に保ちます。
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 */
.x:hover { } /* pseudo-CLASS (state) — one colon */
.x::before { } /* pseudo-ELEMENT (a part) — two colons */
CSS3 は疑似要素を疑似クラスと区別するために :: を導入しました(ブラウザーは互換性のため古い方でシングルコロンを受け入れますが、 :: を使用してください)。
生成された content は一部のスクリーンリーダーで読み取られます。重要な情報を ::before/::after にのみ配置しないでください(装飾に使用してください)。装飾アイコンはアクセシビリティツリーから除外するのが最適です。
疑似要素を使用すると、アイコン、装飾図形(矢印、区切り線)、ドロップキャップ、カウンターを純粋に CSS で追加できます。追加の <div> や <span> は不要です。
マークアップをセマンティックに保ちながら豊富なビジュアルディテールを実現でき、クリーンで保守性の高いスタイリングの基本です。