如何使用 jQuery 動態調整 CSS `:before` 選擇器的寬度？

使用 jQuery 的 CSS :before 選擇器的動態寬度調整

目標： 修改用 :before CSS選擇器裝飾的元素的寬度屬性，特別是當它遵循特定的類別時name.

場景： 考慮以下CSS：

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

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

任務： 更改與:before 選擇器關聯的width 屬性使用jQuery 的.column 類，不影響沒有:before 的元素

解決方案：

正如給定答案中提到的，jQuery 本身不支援直接修改偽類規則。但是，您可以透過動態地將新的樣式元素附加到文件的頭部來規避此限制：

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

這將為 .column 類別中的 :before 選擇器指派 800px 的固定寬度。請注意，!important 聲明會覆蓋任何現有樣式。

或者，您可以使用專為修改 CSS 偽類規則而設計的外掛程式。雖然沒有特定的插件推薦，但在網路上搜尋「jQuery 偽類操作」應該會產生合適的結果。

以上是如何使用 jQuery 動態調整 CSS `:before` 選擇器的寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！