疑似要素と擬似クラスは混同しがちです。下記の違いはあります。
疑似要素 ::after , ::before等
疑似要素は、要素の特定の部分にスタイルを適用するために使用されます。例えば、要素の前後にコンテンツを追加する場合などです。
擬似クラス :hover , :focus, :nth-child(n) &:last-child 等
擬似クラスは、既存の要素に特定の状態に基づいてスタイルを適用するために使用されます。例えば、マウスホバー時や訪問済みのリンクなどにスタイルを適用する場合です。
疑似要素は、要素の特定の部分や生成されたコンテンツにスタイルを適用します。::を使用して指定します。ただし、CSS2.1の互換性のために一部の疑似要素（::beforeや::afterなど）は:でも動作します。擬似クラスは、要素の状態や位置に基づいてスタイルを適用します。:を使用して指定します。どっちが :: かどっちが : か迷ってしまう時がありますね。