0

My CSS looks like:

/* works */
.badger-left:after {
    left: 0;
    border-radius: 6px 0 6px 0;
    background: #428bca;
}

jQuery to change it on the fly:

$('.badger-left:after').css('background-color', "red"); // doesnt work
$('.badger-left').attr({ 'data-badger': "USA" }); // works

HTML:

  <div class="col-sm-12 badger-left" data-badger="">


  </div>

Why isn't the jQuery selector working and what should I do to make it work? http://screencast.com/t/onWs4KDJVD -- where it says "USA" (USA is set from the attr. data-badger in jquery), that background needs to change to red (or whatever color specified) via jQuery.

Thanks

Andrew
  • 1,963
  • 3
  • 25
  • 35
Dan P.
  • 1,707
  • 4
  • 29
  • 57

3 Answers3

1

The CSS selectors :after and :before is not supported in javascript, most pseudo-classes are not.

Slugge
  • 180
  • 1
  • 11
0

jQuery adds the css inline. Since :before, and :after do not really exist there is no style attribute to place the css into anyway.

Run this test to see:

$("*:after") // returns []
$("*") // returns a huge array ;)
bottens
  • 3,834
  • 1
  • 13
  • 15
0

You could use either a jQuery .append() or .add() to achieve a similar effect.

The CSS ::after selector just adds an "imaginary" div to the inside of the element it's applied to just before the closing tag.

.append()

https://api.jquery.com/append/

.add()

https://api.jquery.com/add/

jQuery:

$('.badger-left').append('div');

CSS:

.badger-left div{
    /* ".badger-left::after" styling would go here */
}