：afterとafter ::

Question

CSS 2.1 :afterとCSS 3 ::after疑似セレクタ（旧式のブラウザでは::after以外のもの）との間に機能的な違いはありますか？より新しい仕様を使用する実用的な理由はありますか？

Answer 1

擬似クラスと擬似要素の区別です。 （しばらくの周りされているとあなたがIE8のサポートが必要な場合は、単一のコロンで使用することができます）::first-line、::first-letter、::beforeと::afterを除き

は、要素がダブルコロンを必要と擬似。

擬似クラスを使用すると、たとえば、divの中で最初または特定<p>年代を選択するための:first-childまたは:nth-of-type(n)を使用することができ、実際の要素自体を選択し。
（そしてまた:hoverと:focusのような実際の要素の状態。）

擬似要素は、自分の権利の要素ではない事を::first-lineか::first-letterのような要素のサブ部分をターゲット。実際

---

、ここではより良い説明：http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
また、ここで：::afterようhttp://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/

Answer 2

CSSセレクタは、DOMツリー内の明示的な要素として使用することはできませんいくつかの仮想的な要素です。彼らは「Pseudo-Elements」と呼ばれ、要素（例えば：::before、::after）前/後挿入にいくつかのコンテンツを使用している（：::first-letterなど）要素の一部を選択か、。現在のところ、5つの標準的な擬似要素：after, before, first-letter, first-line, selectionしかありません。一方

、（:hover、:focus、:nth-child(n)などのような）要素の特別状態を定義するために使用される「Pseudo-Classes」と呼ばれるセレクタの他のタイプがあります。これらは、DOM内の既存の要素全体を選択します。擬似クラスは30以上の項目を持つ長いリストです。

最初に（CSS2とCSS1で）、シングルコロン構文が擬似クラスと擬似要素の両方に使用されました。しかし、CSS3では、::の構文が、擬似要素の表記を:の表記に置き換えて、それらをよりよく区別しました。

下位互換性のために、古いシングルコロン構文は、:afterのような疑似要素に対しても許容されます（ブラウザはすべてセミコロンで1つの古い構文をサポートします）。 IE8は新しい構文をサポートしていません（IE8をサポートしたい場合はシングルコロンを使用してください）。