Show function not working with :before

Question

Hi I have this click function to show a :before and for some reason it wont show it ? Here is my code thank you! Also the .cart-toggle:before class is display:none; so it can show.

$( ".cart-toggle" ).click(function() {
  $( ".cart-toggle:before" ).show( "slow", function() {
    // Animation complete.
  });
});

Thank you !

Answer 1

jQuery (and javascript in general) does not support CSS pseudo classes as they are not part of the DOM.

The workaround depends on what you're trying to do, but animating a pseudo class with jQuery is pretty much not possible, so I'm guessing you would have to create an actual element instead of the pseudo class.

Answer 2

Every CSS selector is not allowed in jQuery. Only a little bit of them are allowed, for example . class selector, # id selector, :first-child child selector.

Other than that, jQuery has its own methods of selecting elements of type. Like :checkbox (https://api.jquery.com/checkbox-selector/)

Other CSS selectors are not valid in jQuery.

Answer 3

So you can't do exactly what you want, but you can show/hide your :before in CSS based on a class, and then add that class later on to show it. Example:

Fiddle

HTML

<p>Example</p>

CSS

p.toggled:before {
    content: "show-me";
}

JQUERY

$("p").on("click", function() {
    $(this).toggleClass("toggled");
});