Toggle class for pseudo :after class

Question

Given a button

<button href="#" class="search  no-style search-active" style="display: inline-block;">
 <div class="pointer" style="display:none">::after</div>
</button>

that when triggered, the pseudo :after class needs to have a class search-active toggled that sets a background color for the button

.primary .search:after,
.primary .search[data-search="disabled"]:after {
  color: #fff;
  content: "\E8B6";
  font-family: "Material Icons";
  position: absolute;
  top: -25px;
  transition: color .3s;
  font-size: 26px;
  margin-left: -10px;
}

//THIS NEEDS TO BE APPLIED TO THE :after PSEUDO CLASS TO SET THE BACKGROUND COLOR OF THE BUTTON
.search-active {
  background-color: purple;
  padding: 12px 33px 19px 35px;
  margin: 0px -30px;
}

I have similar jquery working for another button, but this doesn't seem to be working for this particular instance:

$(".search").on("click", function() {
  $(this).toggleClass('search-active');
});

JSFIDDLE:https://jsfiddle.net/xk9hx9j9/2/

I think you should just replace `.search-active` with `.primary .search.search-active:after` in your stylesheet. https://jsfiddle.net/xk9hx9j9/4/ — Blazemonger, May 16 '16 at 21:44
@Blazemonger - the `:after` class is what has the icon, and then I need to apply the background color on click using the active class I created. I can't just set the background color on by default, as that's not what I'm trying to achieve. — user3438917, May 16 '16 at 21:47
You may find this informative: http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin — SimianAngel, May 16 '16 at 21:48

score -1 · Answer 1 · answered May 16 '16 at 21:50

-1

it's your comment remove this line "//THIS NEEDS TO BE APPLIED TO THE :after PSEUDO CLASS TO SET THE BACKGROUND COLOR OF THE BUTTON"

answered May 16 '16 at 21:50

Mina Jacob

1,881
22
23

The comment doesn't affect the code. I put the comment in to explain what I need to have happen. – user3438917 May 16 '16 at 21:52
/* This is how you comment in CSS */ remove you comment and try again – Mina Jacob May 16 '16 at 21:54
I know how to comment in CSS, I've been working in JS all day, which uses `//` as a comment. That doesn't affect the rendering of this CSS though. – user3438917 May 16 '16 at 21:57
yes, you're correct // is js comment while /* bla */ is CSS comment you must have been confused writing js comment in CSS – Mina Jacob May 16 '16 at 21:59
So, aside from my comments, any suggestions on how to get the css to apply to the pseudo class? – user3438917 May 16 '16 at 22:00
Strange that this is working in the fiddle, but not in my code. – user3438917 May 16 '16 at 22:10

Toggle class for pseudo :after class

1 Answers1