Estoy tratando de crear estilos donde los íconos están envueltos en etiquetas. Cuando haga clic en el icono, cambiará de color para que sepa que se ha hecho clic. Una vez que vuelva a cargar la página, los íconos volverán al color original sin hacer clic. Esto se usará para una página que tendrá decenas/cientos de íconos, en algo así como una tabla; por eso es importante ver en qué se ha hecho clic.
a { text-decoration: none; } .dog-icon:before { content: "\f6d3"; font-family: 'Font Awesome 5 Free'; font-size: 40px; font-weight: 900; padding: 40px; } <link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/> <div style="margin-top: 40px;"> <a href="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=1.00xw:0.669xh;0,0.190xh&resize=1200:*" target="_blank" class="dog-icon"></a> <a href="https://www.cdc.gov/healthypets/images/pets/angry-dog.jpg" target="_blank" class="dog-icon"></a> <a href="https://media.npr.org/assets/img/2021/04/27/prancer_wide-db59609b5bd96c9e56e4dfe32d198461197880c2.jpg?s=1400" target="_blank" class="dog-icon"></a> <a href="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2019/10/08113321/Dog-behavior-Kasper-Luijsterburg.jpg" target="_blank" class="dog-icon"></a> <a href="https://i.ytimg.com/vi/EVqxcWQOEnU/maxresdefault.jpg" target="_blank" class="dog-icon"></a> </div>Si agrega un poco de código JavaScript, se puede hacer con bastante facilidad:
document.querySelector(".links").onclick=ev=>{if(ev.target.tagName=="A") ev.target.className="done" } .links a { text-decoration: none; font-family: 'Font Awesome 5 Free'; font-size: 40px; font-weight: 900; margin: 20px; } .links a.done { color:green } <link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/> <div class="links" style="margin-top: 40px;"> <a href="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=1.00xw:0.669xh;0,0.190xh&resize=1200:*" target="_blank"></a> <a href="https://www.cdc.gov/healthypets/images/pets/angry-dog.jpg" target="_blank"></a> <a href="https://media.npr.org/assets/img/2021/04/27/prancer_wide-db59609b5bd96c9e56e4dfe32d198461197880c2.jpg?s=1400" target="_blank"></a> <a href="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2019/10/08113321/Dog-behavior-Kasper-Luijsterburg.jpg" target="_blank"></a> <a href="https://i.ytimg.com/vi/EVqxcWQOEnU/maxresdefault.jpg" target="_blank"></a> </div>Si solo desea saber en qué se hizo clic y no desea realizar un seguimiento de las recargas de página, agregue un controlador de eventos a la ventana, busque el ancla en la que se hizo clic y agregue una clase.
window.addEventListener("click", function (evt) { const link = evt.target.closest("a"); if (link) link.classList.add("clicked"); }); a { text-decoration: none; } .dog-icon:before { content: "\f6d3"; font-family: 'Font Awesome 5 Free'; font-size: 40px; font-weight: 900; padding: 40px; } a.clicked { color: green; } <link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/> <div style="margin-top: 40px;"> <a href="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=1.00xw:0.669xh;0,0.190xh&resize=1200:*" target="_blank" class="dog-icon"></a> <a href="https://www.cdc.gov/healthypets/images/pets/angry-dog.jpg" target="_blank" class="dog-icon"></a> <a href="https://media.npr.org/assets/img/2021/04/27/prancer_wide-db59609b5bd96c9e56e4dfe32d198461197880c2.jpg?s=1400" target="_blank" class="dog-icon"></a> <a href="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2019/10/08113321/Dog-behavior-Kasper-Luijsterburg.jpg" target="_blank" class="dog-icon"></a> <a href="https://i.ytimg.com/vi/EVqxcWQOEnU/maxresdefault.jpg" target="_blank" class="dog-icon"></a> </div>puede intentar usar el selector activo para sus etiquetas.
por ejemplo:
a:active{ (enter css here) }Soy nuevo en CSS, por lo que podría no funcionar, pero vale la pena intentarlo.