jQuery Removing ::after css from an element

Question

I have css like:

.support-hub .app-detail:after {
    content: "";
    display: table;
    clear: both;
}

Firebug shows it as

.support-hub .app-detail::after {
    clear: both;
    content: "";
    display: table;
}

In my code I am doing this:

$('.support-hub .app-detail:after').css({'display':'inline'});

But that display property is not getting changed. Pls help. Very less documentation available for :after css manipulation with jQuery

Answer 1

One quick solution would be to apply the ::after or ::before style to a class(not the main element) and remove the e class

Answer 2

You could not use after like this. Technically DOM elements cannot be accessed by the jQuery with this.

Simply try like this

$('.support-hub .app-detail').css({'display':'inline'});

Or you may use next jQuery method or something like this to manipulate the DOM elements.

$('.support-hub .app-detail').next().css({'display':'inline'});

Please refer this Link

Answer 3

You could add the following code to your css:

.support-hub .app-detail.inline:after {
    content: "";
    display: inline;
    clear: both;
}

And you could call the this from javascript:

$('.support-hub .app-detail').addClass('');