これでもう絶対迷わない! CSSの疑似クラスと疑似要素、:と::の違い | コリス

https://coliss.com/articles/build-websites/operation/css/difference-between-pseudo-classes-and-pseudo-elements.html

確かに迷う時がある。

以下のように使い分けられているとのこと。

擬似クラス

疑似クラス(pseudo-class)は、ユーザーの操作やブラウザに保存されている情報などをページに記述されたHTML以外の情報に基づいて、CSSで要素を選択できるようにするものです。

疑似要素

疑似要素(pseudo-element)は、DOM要素の特定の部分にCSSでスタイルを設定できるようにするものです。

注意点

【訳者注】
一部の疑似要素(::before, ::after, ::first-letter, ::first-line)は:でも下位互換性によりブラウザで動作します。

そうなのよね。動いてしまうから、余計ややこしい。