Jquery respond to content:after

Question

I've set various media queries on my project which change the body:after content to different values depending on the viewport.

For the purposes of this I've made a Codepen and added my values on a div called .example

The Scss:

.example{
  width: 10%;
  height: 100px;
  background: Tomato;
  position: relative;
  float: left;
  color: black;
  margin-right: 20px;

  @include respond-to(wide-screens) {
    &:after{
      content: "wide-screens";
    }
  }


  @include respond-to(ninesixty) {
    width: 32.333%;
    margin-right: 1%;
    margin-bottom: 1%;
    &:after{
      content: "ninesixty";
    }
  }

  @include respond-to(handhelds) {
    width: 49%;
    margin-right: 1%;
    margin-bottom: 1%;
    &:after{
      content: "handhelds";
    }
  }

}

the jQuery:

if ($('.example').css("content","wide-screens")){
  console.log("wide-screens");
}
else if ($('.example').css("content","ninesixty")){
  console.log("ninesixty");
}

From my experiments though it's only ever showing one value despite another being set. The console log will only ever show: wide-screens

Can anyone point out what I'm doing wrong?

The Codepen: http://codepen.io/vdecree/pen/LybJh

Possible duplicate of [How do I access style properties of pseudo-elements with jQuery?](http://stackoverflow.com/questions/3743513/how-do-i-access-style-properties-of-pseudo-elements-with-jquery) — Frédéric Hamidi, May 06 '14 at 10:15

score 2 · Accepted Answer · answered May 06 '14 at 10:16

2

JavaScript cannot interact with psuedo-elements (::before, ::after, and the newer ones too). Therefore, jQuery cannot tell you what the content property of said psuedo-elements' CSS is, therefore your code won't work.

Instead, you should either implement the media queries in JS:

if( window.innerWidth <= 640) {
    /* equivalent to @media all and (max-width:640px) */
}

Or (more messily) rely on CSS properties of the "real" element.

answered May 06 '14 at 10:16

Niet the Dark Absol

320,036
81
464
592

Thanks, I didn't realise this. Really appreciate the help — learnt something new :) – Gerico May 06 '14 at 10:18
1

No problem, and thank *you* for not being one of those people who go "okay, so JavaScript can't do it, how do I do it in jQuery?" You'd be surprised how often that gets asked... – Niet the Dark Absol May 06 '14 at 10:20
No problems, I took a bit of a shot in the dark with my method. Glad I know for future reference. I'll accept answer in 6 minutes. – Gerico May 06 '14 at 10:21

Jquery respond to content:after

1 Answers1