Comment puis-je modifier dynamiquement la largeur d'un pseudo-élément :before à l'aide de jQuery ?

Modification dynamique de la largeur 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 :before -element en utilisant JQuery, vous pouvez ajouter un nouvel élément de style à l'en-tête du document :

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

Cela ajoute une nouvelle règle CSS qui remplace la largeur initiale.规则优先於现有规则。

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, elle vous permet pour modifier dynamiquement leur largeur ou d'autres propriétés CSS.

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!