CSS 擬似要素

CSS 擬似要素は特別なセレクターであり、HTML 構造を変更することなく、ページ要素の特定の部分にスタイルを設定できます。

CSS 擬似要素は、セレクターに特別な効果を追加するために使用されます。

よく使われる CSS 擬似要素には、::before、::after、::first-line、::first-letter などがあります。

構文

擬似要素の構文：

selector::pseudo-element {
    property: value;
}

CSS クラスでも擬似要素を使用できます：

selector.class::pseudo-element {
    property: value;
}

:first-line 擬似要素

"first-line" 擬似要素は、テキストの最初の行に特別なスタイルを設定するために使用されます。

次の例では、ブラウザは "first-line" 擬似要素のスタイルに従って、p 要素の最初の行のテキストをフォーマットします：

注意："first-line" 擬似要素はブロックレベル要素にのみ使用できます。

注意：以下のプロパティは "first-line" 擬似要素に適用できます：

• font properties
• color properties 
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

:first-letter 擬似要素

"first-letter" 擬似要素は、テキストの最初の文字に特別なスタイルを設定するために使用されます：

注意："first-letter" 擬似要素はブロックレベル要素にのみ使用できます。

注意：以下のプロパティは "first-letter" 擬似要素に適用できます：

• font properties
• color properties 
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if "float" is "none")
• text-transform
• line-height
• float
• clear

擬似要素とCSSクラス

擬似要素はCSSクラスと組み合わせることができます：

p.article:first-letter {color:#FF0000;}

<p class="article">文章段落</p>

上記の例では、class が article であるすべての段落の最初の文字が赤色になります。

複数の擬似要素

複数の擬似要素を組み合わせて使用できます。

次の例では、段落の最初の文字は赤色で表示され、そのフォントサイズは xx-large になります。最初の行の残りのテキストは青色で、スモールキャピタルで表示されます。

段落内の残りのテキストは、デフォルトのフォントサイズと色で表示されます：

CSS - :before 擬似要素

":before" 擬似要素は、要素のコンテンツの前に新しいコンテンツを挿入できます。

次の例では、各 <h1> 要素の前に画像を挿入します：

CSS - :after 擬似要素

":after" 擬似要素は、要素のコンテンツの後に新しいコンテンツを挿入できます。

次の例では、各 <h1> 要素の後に画像を挿入します：

すべてのCSS擬似クラス/要素