jquery - Check @media rule with javascript by detecting css rule -

i know matchmedia.js thinking detect current @media rule easy this. however, it's not working in firefox – (which means it's not correct in first place...) looking @ now, shouldn't content on :after pseudo element? advice? have codepen here:

css

#test {   content:  "small" }  @media screen , (min-width: $bp1) {   #test {     content: "medium"   } } 

jquery

var sizecheck = function() {    if ( $("#test").css('content') === 'small') {      $('.proof').text('jquery knows page small reading css @media rules.');    } else if ( $("#test").css('content') === 'medium') {      $('.proof').text('jquery knows page medium reading css @media rules.');    }  };  // run function on document ready $(document).ready(sizecheck);  // , run function on window resize event $(window).resize(sizecheck); 

you've got quite interesting test there!

to answer question: yes, content can used :after , :before pseudo classes.

applies ::before , ::after pseudo-elements

source: content - css | mdn

edit #1

i found you; looks possible content of :after 'after all' :)

var content = window.getcomputedstyle(     document.queryselector('#test'), ':after' ).getpropertyvalue('content'); 

source: get pseudo-element properties javascript

i'm not used codepen, created jsfiddle.

edit #2

looks firefox adds double code actual value, in console appeared this: ""string"".

a way around test against both this:

if (content == '"small"' || content == 'small') {     // ... } 

i updated the fiddle here.