Change pseudo element properties with JavaScript

_element.scss

// SCSS
.element {
  --dynamic-width: 0%;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  margin: 0 auto;

  &:after {
    content: "";
    display: block;
    background-color: #000;
    height: 2px;
    width: var(--dynamic-width);
    position:relative;
    left: 100%;
    top: 50%;
    transition: width 0.2s ease;
  }
}

element.js

// JavaScript
let element = document.getElementsByClassName("element")[0];
element.style.setProperty("--dynamic-width", '50%');