なんか混在しているものを見るので自分自身のためのまとめ。
TL;DR
- 現状の疑似要素のスタンダードな仕様はコロン2つで書く
- IE8などCSS2準拠のブラウザではコロン1つで定義されているが、多くがCSS3に対応している2021年時点では考えなくても良い要素
そもそも擬似クラスと疑似要素は
MDNの記述が適切なので引用
まずは疑似クラスについて
疑似クラスは、特定の状態にある要素を選択するセレクターです。たとえば、それらはそのタイプの最初の要素であるか、マウスポインターによってホバーされています。それらは、ドキュメントの一部にクラスを適用したかのように振る舞う傾向があり、マークアップの余分なクラスを削減し、より柔軟で保守可能なコードを提供するのに役立ちます。 - 疑似クラスと疑似要素 - ウェブ開発を学ぶ | MDN
そして疑似要素について
疑似要素は同様に動作しますが、既存の要素にクラスを適用するのではなく、まったく新しいHTML要素をマークアップに追加したかのように動作します - 疑似クラスと疑似要素 - ウェブ開発を学ぶ | MDN
擬似クラスは特定の状態において反応しスタイルがあたり、疑似要素は指定された条件でDOMが書き換わりスタイルがあたるイメージ。
過去経緯と切り分け
CSS1~2では疑似クラスと疑似要素は記述は切り分けて考えられておらず、:focus と :first-line のようにコロン1つの記法になっていた。
そのためIE8などはCSS2準拠の実装になっているため:beforeという形で疑似要素を利用していた。
しかしCSS3の Selectors Level 3 の Changes from CSS2 にて、以下の記述がある。
new pseudo-elements, and introduction of the "::" convention for pseudo-elements
また後続の解説で追加された経緯も記載があり
This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. ( この::表記は、疑似クラスと疑似要素の区別を確立するために、現在のドキュメントで導入されています。 )
ということで、疑似クラスと疑似要素を切り分けるためにこのダブルコロンの記法が追加されたものかと思われる。
