1

I am using web icon font and I am trying to get the content of :before pseudo selector like below 

 var ele = document.querySelector('.flaticon-fishing2');
 var beforeEle = ele.previousSibling;
 // Now befpreEle does not seem to have anything.
 // I want to get the binary content code value of before element

I have tried this too 

 var content = window.getComputedStyle(
document.querySelector('.flaticon-fishing2'), ':before'
 ).getPropertyValue('content');

It is trying to display icon, but not giving the content.

Is there any way to get this?

Exception
  • 8,111
  • 22
  • 85
  • 136
  • As far as I'm aware there is no way to access the before/after pseudo-elements (but I could easily be wrong). It seems that your design is mixing display with logic, which is usually a bad thing; maybe you should re-think your structure. – Dave Apr 13 '14 at 10:02
  • possible duplicate of [Is there any way to reset :after/:before CSS rules for an element?](http://stackoverflow.com/questions/9798210/is-there-any-way-to-reset-after-before-css-rules-for-an-element) – Dave Apr 13 '14 at 10:04
  • @Dave A straight question to your smart comment, if you can prove any of those solutions are working for my requirement, I will vote to close my question. – Exception Apr 13 '14 at 10:29
  • OK, settle down; I meant no offence. The question I marked as a possible duplicate is trying to do a very similar thing (access before/after via JavaScript), but as you can see from the answer, while the capability was part of the DOM2 spec, it was never implemented and has now been dropped. Personally I see that as a good indication that what you're trying to do is impossible. – Dave Apr 13 '14 at 10:53

1 Answers1

1

You can get access the pseudo elements using window.getComputedStyle, like this:

var content = window.getComputedStyle(document.querySelector('#ii'), ':before').getPropertyValue('content');

Here is a working fiddle

Karim AG
  • 2,166
  • 15
  • 29