Manipular estilos de un pseudoelemento con JavaScript

Los pseudoelementos::before y ::after son generados por CSS, eso quiere decir que no existen en el DOM, pero hoy te mostraré un truco para manipular los estilos de dichos pseudoelementos con JavaScript.

Variables CSS

Por si no estabas enterado, las variables CSS ya son una realidad, pero, ¿qué tienen que ver en este caso? Las variables CSS, a diferencia de los pseudoelementos, sí son accesibles por JavaScript a través de la siguiente instrucción:

/*
* element => Elemento al que queremos acceder. En este caso el elemento que genere el pseudoelemento
* propertyName => La propiedad que queremos cambiar. En este caso la variable css
* value => nuevo valor por asignar
*/

element.style.setProperty(propertyName, value)

Recuerda que las variables CSS son en realidad propiedades CSS, por lo tanto, son heredadas por los descendientes (hijos, nietos, etc). Además, por teoría, un elemento que genera un pseudoelemento pasa a ser padre de éste último, por lo que al declarar una variable en un elemento, sus hijos (incluyendo los pseudoelementos) tienen acceso a dicha variable. Basados en este principio, pasemos a la parte práctica:

HTML

<button class="button center" id="button">Cambiar valor de la variable</button>
<div class="container" id="container"></div>

CSS

.container {
    --bg-pseudo     : hsl(20, 90%, 60%); /* Variable que almacena el color de fondo del pseudoelemento */
    display         : flex;
    justify-content : center;
    align-items     : center;
    width           : 50px;
    height          : 50px;
    margin          : 0 auto;
    background      : hsl(240, 70%, 60%);
}

.container::before {
    content    : '';
    display    : block;
    width      : 20px;
    height     : 20px;
    background : var(--bg-pseudo);
}

Para este ejercicio declaramos la variable --bg-pseudo que está destinada a ser el fondo del pseudoelemento. Supongamos que queremos cambian el código del color de esa variable, entonces hacemos lo siguiente:

JS

// Obtenemos el contenedor padre y el botón para poder detectar el click
let container = document.getElementById('container'),
    button    = document.getElementById('button')

// Creamos evento click para cambiar el color
button.addEventListener('click', () => {
    container.style.setProperty('--bg-pseudo', 'hsl(100, 90%, 60%)')
})

Resultado

Cambiar valor de la variable

Asombroso, ¿no lo crees? Pero ahí no acaba la cosa, podemos obtener el mismo resultado reasignando el valor de la variable mediante clases en CSS y JS sólo se encargará de manipular clases y no estilos. Veamos cómo logarlo utilizando el ejemplo anterior, pero de forma más divertida que consiste en obtener colores aleatorios previamente declarados:

HTML

<button class="button center" id="button">Cambiar valor de la variable</button>
<div class="container" id="container"></div>

CSS

.container {
    --bg-pseudo : hsl(127, 100%, 50%); /* Colocamos un color por defecto */
    display         : flex;
    justify-content : center;
    align-items     : center;
    width           : 50px;
    height          : 50px;
    margin          : 0 auto;
    background      : hsl(240, 70%, 60%);
}

/* Clases que asignan el color a la variable */
.container.green {
    --bg-pseudo : hsl(127, 100%, 50%);
}

.container.red {
    --bg-pseudo : hsl(0, 100%, 54%);
}

.container.orange {
    --bg-pseudo : hsl(23, 100%, 54%);
}

.container.yellow {
    --bg-pseudo : hsl(50, 100%, 54%);
}

.container::before {
    content    : '';
    display    : block;
    width      : 20px;
    height     : 20px;
    background : var(--bg-pseudo);
}

JS

let container  = document.getElementById('container'),
    button     = document.getElementById('button'),
    // Arreglo que contiene el nombre de las clases que reasignan el valor de la variable CSS
    colorClass = ['green', 'red', 'orange', 'yellow']
   
// Función para obtener un color aleatorio del arreglo   
const getColorClass = () => {
  let random = Math.round(Math.random() * (colorClass.length - 1))
  return colorClass[random]
}

// Asignamos el color aleatorio a la viaable
button.addEventListener('click', () => {
  colorClass.map(color => container.classList.remove(color))
  container.classList.add(getColorClass())
})

Resultado

Cambiar valor de la variable

Para este momento, manipular los estilos de un pseudoelemento no te volverá a provocar dolores de cabeza. Aprovecho para recordarte que EDteam tiene un curso de Variables CSS¡Totalmente gratis!