Tengo algunos problemas para cambiar el color de :before en un evento de clic de botón. Por el momento, tengo un código que cambia el fondo a rojo cuando llamo a changeColor(); pero no cambia la sección :before, que es el "tick" en una burbuja de chat que estoy programando. ¿Alguna idea de lo que estoy haciendo mal?
Por favor, vea el código a continuación:
HTML: <p id="chatLog"></p> CSS: body { background: #368dda; } .p { position: relative; font-family: sans-serif; font-size: 18px; line-height: 24px; width: 300px; background: #fff; border-radius: 40px; padding: 24px; text-align: center; color: #000; } .p:before { content: ""; width: 0px; height: 0px; position: absolute; border-left: 24px solid #fff; border-right: 12px solid transparent; border-top: 12px solid #fff; border-bottom: 20px solid transparent; left: 32px; bottom: -24px; } Javascript: function changeColor() { document.getElementById('chatLog').style.backgroundColor = `red`; return false; }Javascript tiene acceso al DOM, pero el css genera un pseudo elemento. En su lugar, debería alternar una clase css adicional para sobrescribir los pseudoatributos originales adjuntos al elemento que proporciona el pseudo como tal.
doStuff = () => { const example = document.getElementById('special-p'); example.classList.toggle('green-before'); } p { font-size: 1rem; color: #fff; position: relative; padding: 1rem; outline: gray 1px dotted; } p:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #f00; z-index: -1; transition: background-color .5s ease; } .green-before { color: #000; } .green-before:before { background-color: #0f0; } <p id="special-p">The lazy brown dog jumps over the fence.</p> <button onclick="doStuff()">Do Stuff</button> También puede mirar el background: inherit para permitir que los pseudo hereden atributos del padre.