CSSの擬似要素-あなたが考えるものより

CSSの汎用性は、HTMLドキュメントツリーの外観と形式を制御するために使用されます.しかし、理解の欠如のためにしばしば見落とされる1つの強力な機能は、擬似要素です.名前が示すように、彼らは実際のDOMの一部ではなく、ウェブページの追加情報を提供するCSS抽象化ではない.これはHTMLコンテンツに存在しないドキュメントに何かを表示することを可能にします.覚えておいてください、擬似要素がページで選択されることができないか、操作されることができないので、我々は実際の内容挿入のためにそれを使用してはいけません.彼らは、ウェブページの装飾的な内容のより多くです.

我々は、擬似要素のいくつかのユースケースを議論し、どのように賢明に次のプロジェクトでそれらを実装することができます.覚えておくべきことは構文であり、多くの場合、単一のコロン(:)でオリジナルの仕様に従って書かれますが、レベル3の仕様(CSS 3)の後、擬似クラスと区別できるように、ダブルコロン(::)に変更されます.そして、我々がすでにウェブのゴールを知っているように、それは常に後方互換性を保つことになっています.しかし、我々はダブルコロン(::)に固執しなければなりません.
あなたは、テキストを選択し、背景色やテキストの色を変更する色のテーマに基づいているウェブサイトを見ている必要があります.これは::selection 擬似要素.The ::selection 擬似要素は、ユーザーが選択した要素の一部に一致します.次に、::selection: 色、背景、カーソル、およびアウトラインをそれらに追加することができます.

::selection {
  color: white;
  background: blue;
}

その他の擬似要素::first-line and ::first-letter 正確に何を考えています.最初の行とテキストの最初の文字をスタイルに使用します.

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

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

その結果、

おそらく、すべての中で最も強力です::before and ::after 擬似要素.作業方法を見てみましょう
この例では見出しを持っています<h1> ) ページの真ん中に置かれたHTML本体のタグは、この見出しの擬似要素を選択して::before and ::after それにいくつかのスタイリングで.しかし、それは技術的に特定の要素を対象とする空のコンテンツストリングなしで働かない.

h1::before{
  content: 'before';
  background: #2867b2;
  color: white;
}
h1::after{
  content: 'after';
  background: #2867b2;
  color: white;
}

ブラウザの検査では、それが表示され、我々はそれが私たちのHTMLの空のdivまたはスパンであるかのようにスタイルをすることができます.これはHTMLに不要なマークアップを加えることなくコンテンツをデザインするのに非常に役立つことができます.周りに回転する基本的な誤解::before および:after これはHTMLタグの前に表示されます.それは明らかではないが、擬似要素は要素の対象となる内容の前にしか現れない.

我々が命じたと想像してください<ol> ) および<ul> ) リストは、HTMLで、我々は彼らの前にデフォルトの絵文字を追加したい.マークアップで複製せずにこれを実装するクリーンな方法は、使用することになります::before 文字列の内容として絵文字で.

  .task-list {
    list-style: none;
  }

  .task-list li {
    font-size: 2em;
    margin-bottom: 10px;
  }

  .task-list li::before {
    content: "✅";
    margin-right: 15px;
    font-size: 20px;
  }

他のユースケースは、CSSのポリゴンのスタイリング、スピーチの泡、CSSリボン、グラデーションオーバーレイを作成すると、境界線のリストの種類が異なることができます.
懸念
注意しなければならないことは、イメージに擬似要素を使わないことです<img> ) タグ、彼らはちょうど動作しません.イメージがスペア'コンテンツ'モデルを持っていないので、理由は複雑であるかもしれません、したがって、イメージ自体は内容です.これを念頭に置いておくと、なぜそれが動作していないのデバッグを試みるあなたの貴重な時間を節約できます.あなたはそれを読むことができますhere .
ブラウザサポート
ブラウザのサポートになると::first-line and ::first-letter 擬似要素はCSS 1で導入されましたので、IE 6とIE 7を除いては基本的なサポートがあります:first-line and :first-letter 擬似要素).ここにいくつかexample bugs 異なるブラウザで擬似要素を使用します.
一方で::before and ::after 大部分は進歩的な強化として分類されます.The :before and :after css 2に擬似要素が導入された.1仕様と完全にFirefox 3.5 +で実行され、IE 8 +、サファリ3 +、Googleクロム、およびオペラブラウザ.

擬似要素の未来
他の開発ツールと同様に、CSSの擬似要素は時間とともに進化するだけです.CSS 3が改善し続けて、既存のものが役に立たない間、新しい実施が起こるように.