Как в псевдоэлементе задать свойство через js?

Question

[Black_Fire]

Нужно динамически менять значение в зависимости от условий.

#summSlider {
  position: absolute;
  transform-style: preserve-3d;
}
#summSlider::after {
  width: 100%;
  height: 6px;
  background: url(/wp-content/uploads/2022/10/dashed.png) repeat-x;
  content: "";
  position: absolute;
  display: inline-block;
  right: 0;
  left: 45px; // это значение надо менять
  top: 3px;
  bottom: 0;
  margin: auto;
  transform: translateZ(-1px);
}

Answer 1

[Сергей delphinpro]

#summSlider {
  --slider-width: 100%;
}
#summSlider::after {
  width: var(--slider-width);
}

document.getElementById('summSlider').style.setProperty('--slider-width', '50%')

Answer 2

[Алексей Уколов]

Псевдоэлементы недоступны из js, поскольку не являются, технически, частью dom.
Но вы можете использовать классы, перегенерировать стили или менять значение custom property.