：after vs. :: after
CSS 2.1 :afterとCSS 3 ::after擬似セレクターの間に機能的な違いはありますか（::afterは古いブラウザーではサポートされていません）。新しい仕様を使用する実用的な理由はありますか？
それは、pseudo-classvs pseudo-elementの区別です。
::first-line、::first-letter、::before、および::after（少し前からあり、IE8サポートが必要な場合は単一のコロンで使用できます）を除き、pseudo-elementsrequireダブルコロン。
擬似クラス実際の要素自体を選択し、:first-childまたは:nth-of-type(n)を使用して、divの最初のまたは特定の<p>を選択できます。例。
（および:hoverや:focusなどの実際の要素の状態も。）
疑似要素は、::first-lineや::first-letterなどの要素のサブパートを対象とします。これらは、それ自体は要素ではありません。
実際には、ここでより良い説明： http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
こちら： http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/
_::after_のようなCSSセレクターは、DOMツリーで明示的な要素として利用できない仮想要素です。それらは「Pseudo-Elements」と呼ばれ、要素の前後にあるコンテンツのinsertに使用されます（例：_::before_、 _::after_）または、一部を選択要素（例：_::first-letter_）。現在、標準の疑似要素は5つのみです（_after, before, first-letter, first-line, selection_）。
一方、「Pseudo-Classes」と呼ばれる他のタイプのセレクターは、要素のspecial stateを定義するために使用されます（ _:hover_、_:focus_、:nth-child(n)）など。これらは、DOMの既存の要素全体を選択します。疑似クラスは、30を超える項目を持つ長いリストです。
最初（CSS2およびCSS1）では、擬似クラスと擬似要素の両方にシングルコロン構文が使用されていました。しかし、CSS3では、_::_構文は、疑似要素の_:_表記に置き換わり、それらを区別しやすくなりました。
後方互換性のために、_:after_のような擬似要素には古いシングルコロン構文を使用できます（ブラウザーはすべて、1つのセミコロンで古い構文をサポートしています）。 IE-8のみが新しい構文をサポートしていません（IE8をサポートする場合はシングルコロンを使用します）。