・CSSの疑似要素と疑似クラスの違いは？
・::before と :before どちらも見かけるけどどちらが正しい？

疑似要素と疑似クラスの違いを理解して使うためにまとめました。

疑似要素とは

要素の1文字目、1行目、前後に、など
要素の一部に対してスタイルを適用する指定方法です。

主な擬似要素

::before

要素の前にコンテンツを追加

::after

要素の後ろにコンテンツを追加

::first-letter

要素の1文字目にスタイルを指定

::first-line

要素の一行目にスタイルを指定

疑似クラスとは

ある要素が特定の状態にあるときにスタイルを指定する為に使います。

主な擬似クラス
・:hover
・:active
・:visited
・:nth-child
・:first-child
・:last-child
など。他にも多数あります。

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

上記の例を見て分かるように、
疑似要素はダブルコロン（::）
疑似クラスはシングルコロン（:）
を使います。

IE8以前に対応するために疑似要素もシングルコロン（:）でも動作しますが、
css3以降、疑似要素と疑似クラスを明確に区別する為にシングルコロンとダブルコロンを使い分けるようになっています。

擬似要素と擬似クラスの併用

擬似要素と擬似クラスを併用する場合は、擬似クラス＞擬似要素の順で記述します。

例