CSSの::beforeと:beforeの違い、分かりますか？

これは何

• CSSで装飾をスタイリングするときにbeforeなどを使う機会は多いですよね
  • 記事の分かりやすさとしてbeforeだけを例に挙げていますが、afterやfirst-lineでも全く同じことが当てはまります
• ::beforeでも:beforeでも同じ動きをするんですが、それらがどう違うのかをまとめまた記事です

正しさで言えば::beforeの方が正しい

CSSには疑似要素と疑似クラスという概念があります。
それぞれの詳細な説明は省きますが、特定の要素や状態に対してのみスタイリングを施せて便利ですね。

.class::before {
  /* スタイルを書く */
}

.class:hover {
  /* スタイルを書く */
}

記事タイトルに挙げたbeforeは疑似要素なので、コロン2つの::beforeが正しいです。

なんで:beforeでも動くのか？

昔のCSSでは疑似要素と疑似クラスはどちらもコロン1つの記法でした。
しかしCSS3になってからは両者を区別しやすくするために、疑似要素はコロン2つの記法が導入されました。

後方互換性を保つために、コロン1つの記法が今でもサポートされていて問題なく動きます。
ただしあくまでサポートされているだけなので、あえてコロン1つの:beforeを使う理由はありません。

参考