※ :active擬似クラスが有効なのは、要素を選択している間だけです。

例えばマウスクリックで要素を選択する場合、マウスのボタンを押してから上げるまでの間だけ:active擬似クラスが有効となることの注意しましょう。

CSSでonclick-event（クリックイベント）を実装する方法を現役エンジニアが解説【初心者向け】

https://techacademy.jp/magazine/38589