CSS Pseudo-elements(伪元素)

CSS Pseudo-elements 伪元素は、選択子の末尾に追加されるキーワードで、選択された要素の特定の部分にスタイルを変更するために使用されます。注意：pseudo-classes(伪类) は、状態に応じて要素のスタイルを変更できます。

CSS伪元素は、ドキュメントツリーの位置が明確に定義されていないドキュメント要素をスタイル化する方法です。

什么是伪元素

CSS伪元素を使用すると、IDやクラスを追加せずに要素や要素の一部のスタイルを設定できます。パラグラフの最初の文字にスタイルを設定して首字下沉の効果を作成したり、スタイルシートで要素の前にまたは後に内容を挿入したりする場合に非常に役立ちます。

CSS3 新しい二重ダッシュ（::）構文が導入され、伪元素と伪クラスを区別するために使用されます。新しい伪元素の構文は以下のように提供されます：

これらは以下に最もよく使用される伪元素です：

::first-line 第一行伪元素

该::first-line伪元素は、テキストの第一行に特別なスタイルを追加するために使用されます。

以下の例では、スタイルルールがパラグラフの最初の行のテキストのフォーマットを設定し、その行の長さはブラウザのウィンドウまたは含まれる要素の大きさに依存します。

p::first-line　{
　　　　color:　#ff0000;
　　　　font-variant:　small-caps;
}

:: first-letter伪元素

::first-letter伪元素は、テキストの第一行の最初の文字に特別なスタイルを追加するために使用されます。以下の例では、スタイルルールがテキストパラグラフの最初の文字のフォーマットを設定し、首字下沉の効果を作成します。

p::first-letter　{
　　　　color:　#ff0000;
　　　　font-size:　xx-large;
}

:: beforeおよび:: after擬似要素

::beforeおよび::after擬似要素は、要素の前またはその内容の後に生成された内容を挿入するために使用できます。 content CSS属性とこれらの擬似要素を組み合わせて使用すると、生成された内容を挿入します。

これは、ページの実際なマークアップに属さない豊富なコンテンツの要素をさらに装飾するのに非常に役立ちます。これらの擬似要素を使用して、通常の文字列やオブジェクト（例えば画像）および他のリソースを挿入できます。

h1::before　{
　　　　content:　url("images/marker-left.gif");
}
h1::after　{
　　　　content:　url("images/marker-right.gif");
}

擬似要素とCSSクラス

通常、これらの擬似要素を使用してテキストの特定の段落や他のブロックレベル要素のスタイル。そこで、擬似要素にクラスを宣言すると有効になります。擬似要素はCSSクラス効果を生み出す組み合わせ、特にこのクラスを持つ要素に対して特に重要です。

以下の例のスタイルルールは、すべての段落の最初の文字class="article"を緑色、サイズxxで表示します-large。

p.article::first-letter　{
　　　　color:　#00ff00;
　　　　font-size:　xx-large;
}