jQueryを使用して:before疑似要素の幅を動的に変更するにはどうすればよいですか?

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;
}

次に、:before 擬似オブジェクトの width プロパティを設定します。 -element JQuery を使用すると、ドキュメントの先頭に新しいスタイル要素を追加できます:

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

これにより、新しいスタイル要素が追加されます。初期幅をオーバーライドする CSS ルール設定。重要なヒントは、新しいビューを確保するために "! important" を使用することです。

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

このメソッドは :before 疑似要素に固有のものではありませんが、疑似要素の幅などを動的に変更できます。 CSS プロパティ。

以上がjQueryを使用して:before疑似要素の幅を動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。