Question

Buenas tengo una barra de progreso.

Este es el HTML

<div class="bar">
  <div class="info">
    <span>Limpieza</span>
  </div>
  <div class="progress-line" id="limpieza">
    <span></span>
  </div>
</div>

y este es en parte, el css

.bar .progress-line.seguridad span{
  width: 90%;
}
.progress-line.seguridad span::after{
  content: "90%";
}

Lo que quiero hacer es que cambie el valor tanto del width como del content al valor que ponga con javascript

he probado con esto, pero no funciona:

var seguridad2 = document.getElementByClassName("bar progress-line seguridad").getElementByTagName('span');  
  seguridad2.style.width = "100%";

por cierto tengo pensado sustituir el valor 100% por un valor retornado en Django. No se si se puede o no, quedando algo así.

seguridad2.style.width = "{{lista.ancho}}";

Answer 1

Me autorespondo. No se pueden cambiar directamente los seudoelementos. para ello tenemos que usar los atributos.

.progress-line.seguridad span::after{
  content: atrr(tag-id);
}

y entonces en el html tenemos por ejemplo:

<div class="progress-line" id="limpieza" tag-id=90>
    <span></span>
</div>

luego con Javascript lo buscamos al elemento por id y le modificamos el tag-id