Modification de la largeur dynamique des sélecteurs :before CSS avec JQuery

Dans le développement Web, vous pouvez rencontrer des scénarios dans lesquels le contenu dynamique nécessite des ajustements du style de pseudo-éléments comme :before. Pour y parvenir avec JQuery, une bibliothèque javascript populaire, suivez ces étapes :

Tout d'abord, supposez les règles CSS suivantes :

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

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

Maintenant, pour définir la propriété width du pseudo-élément :before à l'aide de JQuery, vous pouvez ajouter un nouvel élément de style à l'en-tête du document :

$('head').append('');

Cela ajoute une nouvelle règle CSS qui remplace la largeur initiale設定。重要提示是使用 "!important " 来确保新规则优先於现有规则。

Pour une démonstration en direct, reportez-vous à cette URL : [Live Demo Link]

Bien que cette méthode ne soit pas spécifique aux pseudo-éléments :before , il vous permet de modifier dynamiquement leur largeur ou d'autres propriétés CSS.