これでもう絶対迷わない！ 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）は:でも下位互換性によりブラウザで動作します。

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