Is it possible to get multi pseudo-element to using javascript?

Question

Actually, I want to get multiple pseudo-element to using querySelectorAll.

I read some of the related articles there all of the developers say we haven't access to use querySelectorAll to get multiple pseudo-element.

We can get just one element to use querySelector and code like the bellow the code.

const textAfter = window.getComputedStyle(
document.querySelector(".text-after"), ":after"
).getPropertyValue("color")
console.log(textAfter)

But sometimes our project purpose needs to use multiple selectors. So, that's why have anyone experienced in here? who can help to solved this problem?

Thanks to @All

Answer 1

Reverse the order. Instead of trying to compute the properties of a list of elements, for each element in the list, compute the properties for each single element:

const elements = Array.from(document.querySelectorAll(`.text-after`));

const allOfThem = elements.map(element => 
  window.getComputedStyle(element, ":after").getPropertyValue("color")
);

console.log(allOfThem);

(We use Array.from here, because while an HTMLCollection comes with .forEach , it does not come with .map so we need to force it into being a real array before we do our mapping)