JQuery を使用した :before CSS セレクターの動的幅変更

Web 開発では、動的コンテンツのスタイルの調整が必要なシナリオに遭遇することがあります。 :before のような疑似要素の。これを人気のある JavaScript ライブラリである JQuery で実現するには、次の手順に従います。

まず、次の CSS ルールを前提とします。

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

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

ここで、JQuery を使用して :before 疑似要素の width プロパティを設定するには、ドキュメントの head に新しいスタイル要素を追加します:

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

これにより、初期幅設定をオーバーライドする新しい CSS ルールが追加されます。

ライブ デモンストレーションについては、次の URL を参照してください: [ライブ デモ リンク]

ただし、このメソッドは :before 擬似要素に固有のものではありません。を使用すると、幅やその他の CSS プロパティを動的に変更できます。