使用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 偽元素的寬度屬性，您可以將新的樣式元素附加到文件的頭部：

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

這會增加一條新的CSS規則，覆蓋初始寬度設定。重要提示是使用 "!important " 來確保新規則優先於現有規則。

現場示範請參考此網址：[現場示範連結]

雖然此方法並非特定於 :before 偽元素，它允許您動態修改其寬度或其他 CSS 屬性。