Remove an ::after CSS style using jQuery

Question

I have a CSS file that specifies an :after style against a class ('view-performance')

Using jQuery (because my JS file contains the business logic), how can I remove the :after style based on the business logic?

Answer 1

You cannot reach pseudo elements using jQuery!

But you can do it with css, and manipulate it using .addClass() / .removeClass()

Here is an example how can you remove pseudo element :after by adding css class:

Your JS:

$('.view-performance').addClass('without-after-element');

Your CSS:

.view-performance:after {
  content: 'i go after';
}
.view-performance.without-after-element:after {
  content: none;
}

You may also check this question:

stackoverflow.com/questions/17788990/access-the-css-after-selector-with-jquery

Answer 2

$('.view-performance:after').css('display','none');