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'];

Answer 2

You should dos something like this:

window.getComputedStyle(
    document.querySelector('somedivId'), ':after'
);

Sample here: https://jsfiddle.net/cfwmqbvn/

Answer 3

I use an arrow pointing in the direction that the content and sidebar will toggle to/from via a CSS pseudo-element. The code below is effectively a write mode however it is entirely possible to read CSS pseudo-element content as well.

Since there is a bit involved I'll also post the prerequisites (source: JAB Creations web platform JavaScript documentation, if anything missing look it up there) so those who wish to try it out can fairly quickly do so.

CSS

#menu a[href*='sidebar']::after {content: '\2192' !important;}

JavaScript Use

css_rule_set('#menu a[href*="sidebar"]::after','content','"\u2192"','important');

JavaScript Prerequisites

var sidebar = 20;


function id_(id)
{
 return (document.getElementById(id)) ? document.getElementById(id) : false;
}


function css_rule_set(selector,property,value,important)
{
 try
 {
  for (var i = 0; i<document.styleSheets.length; i++)
  {
   var ss = document.styleSheets[i];
   var r = ss.cssRules ? ss.cssRules : ss.rules;

   for (var j = 0; j<r.length; j++)
   {
    if (r[j].selectorText && r[j].selectorText==selector)
    {
     if (typeof important=='undefined') {r[j].style.setProperty(property,value);}
     else {r[j].style.setProperty(property,value,'important');}
     break;
    }
   }
  }
 }
 catch(e) {if (e.name !== 'SecurityError') {console.log('Developer: '+e);}}
}


function sidebar_toggle()
{
 if (id_('menu_mobile')) {id_('menu_mobile').checked = false;}

 if (getComputedStyle(id_('side')).getPropertyValue('display') == 'none')
 {
  css_rule_set('#menu a[href*="sidebar"]::after','content','"\u2192"','important');

  if (is_mobile())
  {
   css_rule_set('main','display','none','important');
   css_rule_set('#side','width','100%','important');
   css_rule_set('#side','display','block','important');
  }
  else
  {
   css_rule_set('main','width',(100 - sidebar)+'%');
   css_rule_set('#side','display','block');
  }
 }
 else
 {
  css_rule_set('#menu a[href*="sidebar"]::after','content','"\u2190"','important');

  if (is_mobile())
  {
   css_rule_set('main','display','block','important');
   css_rule_set('main','width','100%','important');
   css_rule_set('#side','display','none','important');
  }
  else
  {
   css_rule_set('main','width','100%','important');
   css_rule_set('#side','display','none');
  }
 }

Answer 4

There is a way in JavaScript to access value of pseudo elements without any library. To get the value, you need to use the 'getComputedStyle' function. The second parameter is optional.

let elem = window.getComputedStyle(parent, ':before');
alert(elem.getPropertyValue('background'))

This will do alert the value of pseudo element.

Answer 5

let elem = window.getComputedStyle(document.querySelector('#item'), ':after'); console.log(elem.getPropertyValue('content'))