Dynamische Breitenänderung von :before CSS-Selektoren mit JQuery

In der Webentwicklung können Sie auf Szenarien stoßen, in denen dynamische Inhalte Anpassungen am Stil erfordern von Pseudoelementen wie :before. Um dies mit JQuery, einer beliebten Javascript-Bibliothek, zu erreichen, gehen Sie folgendermaßen vor:

Nehmen Sie zunächst die folgenden CSS-Regeln an:

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

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

Um nun die width-Eigenschaft des :before-Pseudoelements mithilfe von JQuery festzulegen, können Sie ein neues Stilelement an den Kopf des Dokuments anhängen:

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

Dies fügt eine neue CSS-Regel hinzu, die die anfängliche Breite überschreibt設定。重要提示是使用 "!important " 来确保新规则优先於现有规则.

Eine Live-Demonstration finden Sie unter dieser URL: [Live-Demo-Link]

Diese Methode ist zwar nicht spezifisch für :before-Pseudoelemente , ermöglicht es Ihnen, ihre Breite oder andere CSS-Eigenschaften dynamisch zu ändern.