Is it possible to recursively remove all CSS pseudo elements from an actual element?

[bendqh1]

Is it possible to recursively remove all CSS pseudo elements from an actual element with vanilla JavaScript and if so what would be a way to do so?

[PaulOB]

Pseudo elements are added by CSS so it was seem sensible to use CSS to remove them.

You can detect if there are pseudo elements using JS I believe but it will still require css (or creating a new css style element) to remove them as pseudo elements do not really exist in the DOM. You could detect if an element has a pseudo element then add a class to it that css can use to remove all the descendant pseudo elements. No need for recursion (see my example below).

Or did you want to remove all pseudo elements from the whole document? Again that could be done in one line of css.

Maybe if you could clarify the situation and whether or not you can use css with your JS?

Here’s a starting point for discussion.

[bendqh1]

Hello
Actually my problem was with actual text hidden deep in the DOM.

But is there a way to remove all pseudo elements whatsoever from a document? I find it interesting, I guess it includes a wildcard of some sort.

[PaulOB]

@bendqh1

But is there a way to remove all pseudo elements whatsoever from a document?

With css you could just do something like this.

*:before,
*:after{content:none!important}

There is a slight chance of specificity issues if the original uses !important also but that is highly unlikely in a properly authored style sheet.

However It would also be strange to remove all those elements unless you had a special use case.