：後vs ::後

CSS 2.1 :afterとCSS 3の::after疑似セレクター（::after以前のブラウザーではサポートされていないものを除く）の間に機能的な違いはありますか？新しい仕様を使用する実用的な理由はありますか？

これは、疑似クラスと疑似要素の違いです。

除き::first-line、::first-letter、::beforeおよび::after（しばらくの周りされているとあなたがIE8のサポートが必要な場合は、単一のコロンで使用できる）、擬似要素が 必要とダブルコロンを。

疑似クラスは、あなたが使用することができ、実際の要素を自分で選択する:first-childか、:nth-of-type(n)最初のまたは特定の選択のために<p>、たとえば、divの中のを。
（また: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 /

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

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

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

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