CSS疑似要素

CSS疑似要素の基本を学ぶ

疑似要素は、要素の特定の部分のスタイルを設定するために使用されます。

それらは二重コロンで始まります::

場合によっては、単一のコロンを使用して実際にそれらを見つけることがありますが、これは下位互換性の理由からサポートされている構文にすぎません。疑似クラスと区別するには、2つのコロンを使用する必要があります。

::beforeそして::afterおそらく最も使用されている疑似要素です。これらは、たとえばアイコンなど、要素の前後にコンテンツを追加するために使用されます。

疑似要素のリストは次のとおりです。

疑似要素 ターゲット
::after 要素の後に疑似要素を作成します
::before 要素の前に疑似要素を作成します
::first-letter テキストブロックの最初の文字のスタイルを設定するために使用できます
::first-line テキストブロックの最初の行のスタイルを設定するために使用できます
::selection ユーザーが選択したテキストをターゲットにします

例を見てみましょう。段落の最初の行のフォントサイズを少し大きくしたいとします。これはタイポグラフィで一般的なことです。

p::first-line {
  font-size: 2rem;
}

または、最初の文字を太字にしたい場合もあります。

p::first-letter {
  font-weight: bolder;
}

::afterそして::before少し直感的ではありません。 CSSを使用してアイコンを追加する必要があったときにそれらを使用したことを覚えています。

指定しますcontent要素の前後に任意の種類のコンテンツを挿入するプロパティ:

p::before {
  content: url(/myimage.png);
}

.myElement::before { content: “Hey Hey!”; }

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: