Passing 'animated' text to js

Question

I have @keyframes text animation is css (text is changing with :after method) I need to pass that text to javascript to chnage the blending mode for each letter (thanks to Mostafa Hassan I know how to do it now!) Not sure how I can grab the text that was altered with :after method in css though. Any help?

<p class="blend text-animate" blend-mode="difference" data="Blend"></p>

.text-animate{
  font-size:280px;
  font-family: sans-serif;
  letter-spacing: -60px;
  text-align: center;
  color: aquamarine;
  animation-name: blending;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.text-animate:after{
  animation-name: blending;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  content: "";
}

@keyframes blending {
0% {content: "NoBlend"; color: aquamarine;}
50% {content: "Keyframes"; color: royalblue;}
100% {content: "NoBlend"; color: aquamarine;}
}

const element = document.getElementsByClassName("blend");
let text = element[0].getAttribute("data");
let blendMode = element[0].getAttribute("blend-mode");
for(let chr of text) 
  element[0].innerHTML += "<span style='mix-blend-mode: "+blendMode+"' > "+chr+"</span>";