Question

I have the following SASS code

a.unfavorite{
  width: 20px;
  background-position: -71px -28px;
  text-decoration: none !important;
  &:before {
    content: "un-favorite";
    background: #000;
    color: #fff;
  }
 }

In JQuery, I want to be able to access the :before element so as to modify it.

I tried doing something like this $('.unfavorite:before') but yields no results. Am I doing it wrong?

Answer 1

CSS pseudo-elements are not technically part of the DOM, and thus cannot be accessed using JavaScript.

What you can do instead is add styles for a second class (anywhere after the first one) and add/remove that class using JavaScript/jQuery.

CSS:

a.unfavorite2:before {
  content: "un-favorite2";
}

jQuery:

$(this).toggleClass('unfavorite2');

http://jsfiddle.net/mblase75/nvqKs/