Modificar el estilo de un pseudo-elemento CSS con JS

Poder modificar el estilo de un elemento de la página «al vuelo» según el resultado de una interacción con el usuario por ejemplo, es bastante común.

Por ejemplo, si estamos validando el campo de un formulario, una opción habitual es marcar en rojo el campo específico que contiene un error para facilitar al usuario encontrar rápidamente donde está el problema y solucionarlo.

Para ello, tenemos la opción de usar la propiedad style del elemento con JavaScript:

document.getElementById(id).style.property = new style

Siempre y cuando ese elemento ya tenga un estilo

O incluso modificar o añadir una clase de CSS al elemento si los cambios a realizar son muchos o el elemento no tiene una propiedad style creada:

document.getElementById("myDIV").className = "newClassName"; 

Pero ¿qué ocurre si acceder o modificar a los estilos que hemos aplicado usando un pseudoelemento como :after o :before?

Con la propiedad getComputedStyle podemos acceder al estilo aplicado al pseudoelemento:

let elemento = document.querySelector('.mi-elemento') 
let estilo = window.getComputedStyle(elemento, '::before')
let color = style.getPropertyValue('background-color')

⚠️ Con getComputedStyle() podemos acceder a los pseudo-elementos, como :after, :before, :marker… pero no a las pseudo-clases como :hover

Y para modificarlo, podemos utilizar el método addRule de styleSheets:

var str = "nuevo contenido";
document.styleSheets[0].addRule('.elm:before','content: "'+str+'";');

Nota: document.styleSheets nos devuelve un array con las hojas de estilo que se están utilizando, si estamos trabajando con varias, tendremos que buscar la que nos interesa para modificar.

Aquí tenéis algunas pruebas sobre cómo funciona:

See the Pen getComputedStyle() y addRule by esolalf (@esther_sola) on CodePen.