How to get pseudo element?

Question

I need to get :after and assign it to variable. It is possible?

querySelectorAll doesn't work.

alert(some_div_with_pseudo.querySelectorAll('::after')[0]) // undefined

Answer 1

The short answer is that you can’t. It’s not there yet.

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.

This is how it should be. In the overall scheme of things, the pages starts off as HTML. JavaScript can be used to modify its behaviour and to manipulate the content on one hand, and CSS can be used to control the presentation of the result:

HTML [→ JavaScript] → CSS → Result

You’ll see that CSS, complete with pseudo elements, comes at the end, so JavaScript doesn’t get a look in.

See also:

• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#Usage_notes
• https://www.w3.org/TR/selectors-api/#grammar

Edit

It seems that in modern JavaScript there is a workaround using window.getComputedStyle(element,pseudoElement):

var element = document.querySelector(' … ');
var styles = window.getComputedStyle(element,':after')
var content = styles['content'];