Comment jQuery modifie les attributs du pseudo-élément CSS_jquery

Les pseudo-éléments CSS (pseudo-éléments) ne sont pas des éléments DOM, vous ne pouvez donc pas les sélectionner directement.

Supposons qu'il existe le code HTML suivant :

<div class="techbrood" id="td_pseudo">techbrood introduction</div>

et code CSS :

.techbrood:before {
width: 0;
}

Maintenant, vous souhaitez définir dynamiquement l'attribut width de techbrood:before à 100% en cas de clic sur un élément,

Il existe deux méthodes, l'une consiste à ajouter un nouveau style :

$('head').append("<style>.techbrood::before{ width:100% }</style>");

(Notez que cette méthode affectera tous les éléments avec la classe techbrood)

Une autre méthode consiste à ajouter une nouvelle classe à l'élément et à définir les attributs de la nouvelle classe pour obtenir l'effet de modifier les attributs du pseudo-élément :

.techbrood.change:before{
width: 100%;
}

Code jQuery :

$('#td_pseudo').addClass("change");