Comment ajuster dynamiquement la largeur d'un sélecteur CSS `:before` avec jQuery ?

Ajustement dynamique de la largeur des sélecteurs CSS :before à l'aide de jQuery

Objectif : Modifier la propriété width des éléments ornés du sélecteur CSS :before, spécifiquement lorsqu'il suit un nom de classe particulier.

Scénario : Considérez le CSS suivant :

.column:before {
    width: 300px;
    float: left;
    content: "";
    height: 430px;
}

.column {
    width: 500px;
    float: right;
    padding: 5px;
    overflow: hidden;
    text-align: justify;
}

Tâche : Modifiez la propriété width du sélecteur :before associé à la classe .column à l'aide de jQuery, sans impacter les éléments sans la règle :before.

Solution :

Comme mentionné dans la réponse donnée, jQuery ne prend en charge nativement la modification directe des règles de pseudo-classe. Cependant, vous pouvez contourner cette limitation en ajoutant dynamiquement un nouvel élément de style à l'en-tête du document :

$('head').append('<style>.column:before {width: 800px !important;}</style>');

Cela attribue une largeur fixe de 800 px au sélecteur :before dans la classe .column. Notez que la déclaration !important remplace tous les styles existants.

Vous pouvez également utiliser un plugin spécialement conçu pour modifier les règles de pseudo-classe CSS. Bien qu'une recommandation de plugin spécifique ne soit pas disponible, une recherche sur le Web pour "manipulation de pseudo-classe jQuery" devrait donner des résultats appropriés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!