使用jQuery切换伪元素

Question

I am trying to toggle the display of an :after pseudo-element (ie.to show/hide it) using jQuery. I successfully toggled the display of a div, but want to do this now with :after .

The :after is being used to create the arrow on the box.

My attempt can be seen here: http://jsfiddle.net/beechboy707/7um9knxt/1/

Here is an extract from it showing the jQuery which is supposed to relate to the CSS selector:

$("#supportus-button-1").click(function () {
$(".supportus-button:after").toggle();
});

Answer 1

I think the easiest approach here is to use CSS classes to limit the scope where the :after rule is applied:

.supportus-button:not(.clicked):after { ... }

Here's an updated fiddle: http://jsfiddle.net/jjcwqjLw/

All current browsers support the :not CSS feature: support is the same as for the :after pseudoelement.