Evento en un pseudo elemento
Problema:
¿Un pseudo elemento puede aceptar eventos?
Los eventos son el mecanismo usado por Javascript para conseguir páginas dinámicas. Hace que se ejecuten acciones cuando ocurrer algo en la página: como un click o un movimiento del ratón.
Se pueden controlar cualquiere evento sobre un elemento existente en la página. ¿Pero y sobre un pseudo elemento? A fin de cuentas en realidad no existen
Solución
Usar una propiedad CSS pensado para eventos en SVG
Para solucionar esta situación usamos lo mismo que se usa para definir los psuedo elementos: estilos CSS
Haremos uso de la propiedad pointer-events pensada para los elementos gráficos como las imágnes SVG, es perfectamente utilizable a los pseudo elementos como :after o :before.
Ejemplo
.contenedor{
pointer-events:none;
height: 300px;
width: 400px;
background: #838683;
position:relative;
}
.contenedor::after{
content:" Pseudo Elemento afer";
display:block;
position: absolute;
height: 2rem;
line-height: 2rem;
width: 100%;
top: 0;
text-align: center;
background-color:antiquewhite;
cursor:pointer;
pointer-events:all;
}
<body>
<div class="contenedor" id="bloque">
</div>
<script>
let boton = document.getElementById("bloque");
boton.addEventListener('click', ()=>{
alert("pulsado en after")
})
</script>
</body>
Este sencilo ejemplo muestraun bloque div con un elemento after que recibe el click del ratón para lanzar un alert.