CSS疑似要素-セレクターの説明の前後

セレクター前

CSS::beforeセレクターを使用して、選択した1つまたは複数の要素のコンテンツの前にコンテンツを挿入できます。使用する::beforeエレメントに取り付けることで使用します。

いくつかの例を見てみましょう。

p::before { content: "* "; } span.comment::before { content: "Comment: "; color: blue; }

To infinity, and beyond!

I am Buzz Lightyear. I come in peace.

May the force be with you.

Do. Or do not. There is no try.

上記の例では、ページのすべての段落要素の前にアスタリスクとスペースを追加しています。また、spanクラスのすべての要素の前に、青色の「Comment:」を付加していますcomment

セレクター後

CSS::afterセレクターを使用して、選択した1つまたは複数の要素のコンテンツの後にコンテンツを挿入できます。使用する::after要素にアタッチして使用します。

ここではいくつかの例を示します。

.buzz::after { content: " - Buzz Lightyear"; color: blue; } .yoda::after { content: " - Yoda"; color: green; }

To infinity, and beyond!

Do. Or do not. There is no try.

上記の例では、クラスの要素に青色の「--BuzzLightyear」を追加していますbuzz。また、クラスの要素に緑色の「--Yoda」を追加していますyoda

シングルコロンとダブルコロン

疑似要素の正しい使用方法については少し議論があります:before。CSS仕様1および2で使用されている古いスタイルのシングルコロン()と、CSS3の推奨事項であるダブルコロン(::before)は、主に「疑似クラスと疑似要素」

ただし、互換性の理由から、シングルコロン方式は引き続き受け入れられます。IE8は単一コロン表記のみをサポートしていることに注意してください。

詳しくは:

  • CSSハンドブック:開発者向けのCSSの便利なガイド
  • 最高のCSSの例とCSS3の例