Como cambiar los estilos de un pseudo elemento con Javascript // How to change the styles of a pseudo element with Javascript

Muchas veces te habrá tocado utilizar pseudo elementos con CSS y por alguna razón u circunstancia tenías que darle alguna animación requerida, desde la hoja de estilos se puede hacer, pero solo con pseudo clases; esto es sencillo, pero supongamos que uno desea que el efecto se aplique cuando se ejecute un evento.
Aquí se torna un poco más difícil de pensar cómo hacerlo, pero también es sencillo y te explicare una manera de logar esto.

Many times you will have had to use pseudo elements with CSS and for some reason or circumstance you had to give it some required animation, from the style sheet it can be done, but only with pseudo classes; this is straightforward, but suppose one wants the effect to be applied when an event is executed. Here it becomes a little more difficult to think how to do it, but it is also simple and I will explain a way to achieve this.

Las hojas de estilo te proporciona algo llamado variables “var()” en donde podemos almacenar valores y estilos que deseamos reutilizar con el mismo nombre en otras etiquetas, y esta misma es la ventaja para poder cambiar estilos ejecutando eventos desde javascript.

The style sheets provide you with something called “var()” variables where we can store values ​​and styles that we want to reuse with the same name in other tags, and this is the same advantage to be able to change styles by executing events from javascript.

Una vez que tienes tus variables definidas los unico que debes hacer es utilizar “setProperty”, con este método estaremos cambiando el valor de una variable en las hojas de estilos.

Once you have your variables defined, the only thing you have to do is use “setProperty”, with this method we will be changing the value of a variable in the style sheets.

Ahora tiene la mitad del ancho, porque solo cambie el valor de esa variable, pero gracias a javascript se puede hacer más dinámico y tener valores deseados.

Now it is half the width, because it only changed the value of that variable, but thanks to javascript it can be made more dynamic and have desired values.