Comment puis-je modifier le style des pseudo-éléments ?

Malheureusement, les pseudo-éléments (::after, ::before, ::first-letter, ::first-line, ::selection) ne font pas partie du DOM, ils ne peuvent donc pas être modifiés par des méthodes qui manipulent le DOM.

La seule modification facile, c'est celle du texte de l'attribut "data-content", il peut être changé en utilisant la méthode attr() au lieu de la méthode data() :

Exemple. Code CSS :

#pTest { display: inline-block; }
#pTest::after { content: attr(data-content); color: blue; }

Code HTML :

<div>
    <p id="pTest" data-content="Le contenu de l'attribut">test = </p>
</div>
 
<button id="btnTest">Go</button>

Code JS :

$( function(){
 
    $( "#btnTest" ).on( "click", function(){
        $( "#pTest" ).attr( "data-content", "Salut les gens !" );
    });
 
});

Pour réaliser des modifications dynamiques du style d'un pseudo-élément, il faut changer la totalité de la règle CSS :

Exemple. Code JS :
    
$( function(){
 
    $( "#btnTest" ).on( "click", function(){
        $( "head > style" ).append( '#pTest::after{ content:"Salut les gens !"; color: red; }' );
    });
 
});

Bien entendu, si vous devez simplement alterner le syle entre des variantes préétablies, il suffit d'utiliser les classes :

Exemple. Code CSS :

#pTest { display: inline-block; }
#pTest::after { content: attr(data-content); color: blue; }
#pTest.variante1::after { content: "Hello World!"; color: cyan; }
#pTest.variante2::after { content: "jQuery est bon pour vous !"; color: red; }

Code HTML :

<div>
    <p id="pTest" data-content="Le contenu de l'attribut">test = </p>
</div>
 
<button id="btnTest">Go</button>

Code JS :

$( function(){
    
    var n = 0;
    
    $( "#btnTest" ).on( "click", function(){
        switch( ++n ){
             case 1:
                $( "#pTest" ).removeClass( "variante1" ).addClass( "variante2" );
                break;
            case 2:
                $( "#pTest" ).removeClass( "variante2" ).addClass( "variante1" );
                break;
            case 3:
                n = 0;
                $( "#pTest" ).removeClass( "variante1 variante2" );
        };
    });
    
});

Auteurs : danielhagnoul et devyan