0

I have an :after pseudo element applying a font awesome icon to my table headers. I want to write a test to make sure that the icons are really there by selecting the element and testing its style. How can I get this style with jquery or plain javascript? 

&:after {
    content: "\f0de";
    font-family: FontAwesome;
  }

I've tried $('th:after'), $('th\\:after'), $('th::after') and a few more things... but looking around the internet it seems like maybe it's not possible at all to test pseudo elements?

EDIT The answers in the duplicate talk about strategies around adding/editing a pseudo element. I just wanted to get the content inside it for a test. I also can't do the trick of conditionally applying a class that contains an after pseudo element because I need to hook into the existing class that the framework i'm using applies and override it. The 2nd answer to this question is how i got it to work. 

var testString = window.getComputedStyle(document.querySelector('thead th'), ':after').getPropertyValue('content');
Community
  • 1
  • 1
Veg
  • 556
  • 2
  • 8
  • 24
  • 1
    Check this: http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript – kosmos Nov 18 '15 at 19:14
  • 1
    This is not possible. Pseudo elements are not part of DOM and cannot be selected. – Salman A Nov 18 '15 at 19:16
  • @SalmanA - You realize that isn't correct right? Everything on the page is part of the DOM. – Travis J Nov 18 '15 at 19:17
  • @TravisJ no, this is incorrect. Pseudo elements are silimar to "generated content" much like bullets on `UL` and numbers on `OL` elements. They are not part of DOM. – Salman A Nov 18 '15 at 19:18
  • @SalmanA - I assumed that it should have been in one of the text nodes. You are right, it is not part of the DOM. – Travis J Nov 18 '15 at 19:22

0 Answers0