I have a very simple element:

How can I check if this element contains the ::after using Javascript?

(I have the element using document.getElementsByTagName('h2')[0])

I don't know how the thing works, and I don't need to know, I just need the code to see if it exists...

In some cases the element looks like this:

I need to be able to detect both cases, if possible!

I have a very simple element:

How can I check if this element contains the ::after using Javascript?

(I have the element using document.getElementsByTagName('h2')[0])

I don't know how the thing works, and I don't need to know, I just need the code to see if it exists...

In some cases the element looks like this:

I need to be able to detect both cases, if possible!

• javascript
• dom
• element
• detect

2 Answers 2

It would be something like this:

var pre = onload; // assign previous onload if any
onload = function(){ // onload wrapper start
if(pre)pre(); // execute previous onload in the new onload
var doc = document, h2a = doc.getElementsByTagName('h2');
var afterIn = [], afterOut = [];
for(var i=0,l=h2a.length; i<l; i++){
  var h2 = h2a[i];
  if(h2.value.match(/\:\:after/)){
    afterIn.push(h2);
  }
  else{
    afterOut.push(h2);
  }
}
for(var i=0,l=afterIn.length; i<l; i++){
  console.log(afterIn[i].value);
}
for(var i=0,l=afterOut.length; i<l; i++){
  console.log(afterOut[i].value);
}
} // onload wrapper end

Check this link, explains how to use it in plain JavaScript (might only work in newer browsers): http://davidwalsh.name/pseudo-element

Edit: if you're looking to edit what the content of the :after is, reference this SO question: Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery