Pseudo elements related

Some nice tricks to set pseudo elements' content, nothing is impossible.
Code comes following.

function inCartAnimation() {
  cartBtn.classList.add('inCartAnimation');
  let amount = 0;
  const productsInCart = JSON.parse(localStorage.getItem("products"));
  productsInCart.map(item => {
    amount += item.qty;
    return amount;
  })
  document.querySelector('button.open-overlay.inCartAnimation').setAttribute('data-before', amount)
  setTimeout(() => {
    cartBtn.classList.remove('inCartAnimation');
  }, 1000);
}

CSS

button.open-overlay.inCartAnimation::after {
  @media screen and (min-width: 800px) {
    content: attr(data-before);
    position: absolute;
    width: 30%;
    top: 29%;
    right: 3px;
    color: white;
    animation: slideInDown 0.7s ease-in, fadeOutDown 0.6s ease 0.7s, disappear 0.2s infinite 1.3s;
  }
}

One good article about how to change svg/img colors

Maybe will update later…so, to be continued…

PS, I was too stupid, tried to select pseudo element by JS. JavaScript has access to the DOM, which is built when the page is loaded from HTML, and modified further when JavaScript manipulates it. A pseudo element is generated by CSS, rather than HTML or JavaScript. It is there purely to give CSS something to hang on to, but it all happens without JavaScript having any idea. – Keep in mind!!!