Según la especificación , el selector de CSS :active solo coincidirá

mientras un elemento está siendo activado por el usuario

Lo que está buscando es el :focus , que también coincide después de hacer clic (sin JavaScript adicional).

 a.audio:focus { ... }

Si desea controlar el elemento activo ( document.activeElement ) con JavaScript, puede usar focus() . El selector de CSS :active no coincidirá.

 <li class="list-group-item"> <!-- adapt click handler to current JavaScript framework --> <a (click)="toggleAudio(); this.focus();" href="javascript:void(0);" class="sprite audio" data-bs-toggle="tooltip" data-bs-placement="top" title="Audio"></a> </li>

Un enfoque alternativo para mostrar que se ha hecho clic en un enlace es alternar una clase separada de CSS, con element.classList.toggle() .

 <style> a.active { ... } </style> <li class="list-group-item"> <!-- adapt click handler to current JavaScript framework --> <a (click)="toggleAudio(); this.classList.toggle('active');" href="javascript:void(0);" class="sprite audio" data-bs-toggle="tooltip" data-bs-placement="top" title="Audio"></a> </li>

Entonces, si lo entiendo correctamente, ¿quiere que este botón (un botón para controlar el audio) tenga una clase activa cuando se hace clic en correcto? Si es así aquí está mi propuesta. Con suerte, esto puede proporcionar lo que está buscando lograr. Déjame saber si esto funciona para ti o no.

Puede ver eso al hacer clic en el botón, si lo mira a través del elemento de inspección. Agregará una clase 'activa' al hacer clic y la eliminará cuando se vuelva a hacer clic.

Codepen aquí: https://codepen.io/no-named-user/pen/abELyar

 let a = document.querySelector('#active'); a.onclick = function() { a.classList.toggle("active"); }

 .sprite { background: url(https://liveplanet.app.br/assets/images/sprite-icons.png) no-repeat; width: 40px; height: 40px; display: inline-block; } a.audio { background-position: 0px -720px; } a.audio:hover { background-position: -40px -720px; } a.audio:active { background-position: -80px -720px; }

 <li class="list-group-item"> <a (click)="toggleAudio()" href="javascript:void(0);" class="sprite audio" data-bs-toggle="tooltip" data-bs-placement="top" title="Audio" id = "active"></a> </li>