changing the css of the pseudo classes of elements with jquery is possible?

Question

I’m doing some tests with jquery and, came to me the following question:

It is possible to manipulate the pseudo class elements css with the jquery?

$('#login_1').click(function(event){
    event.preventDefault();
    if($('#principal-modais').css('display') == 'none') {
        $('#principal-modais').css({'display':'inline-block'});
        $('html').addClass('modais-ativos');
        setTimeout(function(){
            $('.modais-ativos:after').css({'background-color':'rgba(0,0,0,.7)'});
            $('#principal-modais').css({'opacity':1});
        },100);
    }
});
$('#fecha-modais').click(function(event){
    event.preventDefault();
    if($('#principal-modais').css('display') != 'none') {
        $('#principal-modais').css({'opacity':0});
        $('.modais-ativos:after').css({'background-color':'rgba(0,0,0,0)!important'});
        setTimeout(function(){
            $('#principal-modais').css({'display':'none'});
            $('html').removeClass('modais-ativos');
        },1000);
    }
});

Then I performed the above code as a test, but without success, in case it is possible to access the selectors of the elements/classes, as could be done ?

Answer 1

You cannot manipulate because technically psudoclasses is not a part of the DOM, so it is inaccessible by javascript. There are other ways to do this, several of them listed here, i particularly prefer and use method 1, where separate classes are used and at the time of change make a toggle of the classes:

HTML

<span class="modais-ativos preto">

CSS

.preto::after {
    background-color: rgba(0,0,0,0)
}
.outro-preto::after{
     background-color: rgba(0,0,0,.7)
}

Javascript

setTimeout(function(){
    $('.modais-ativos').removeClass('preto').addClass('outro-preto');
},100);

Reference of Soen.