如何使用JQuery動態更改僞元素的CSS？

Question

我有一個僞元素我想改變top:的：

.content:after { 
    top: 30px; //this will change 
} 

變化量是可變的，使用jQuery檢索：

var $position = $(this).offset().top; 

我知道你不能使用.css()改變僞元素CSS和首選的方法是切換現有的類。但是這不會起作用，因爲我班的規則是動態的。

我有點卡住瞭如何去做這件事。會有人有任何建議嗎？

Answer 1

:after等同於將子元素添加到所選元素的末尾。所以如果可能的話，你可以將樣式移動到一個新的子元素，你可以使用JQuery來修改它。所以，你的HTML看起來像：

<div class="content"> 
    ... other content ... 
    <div class="content-after"></div> 
</div> 

CSS：

.content > .content-after { 
    top: 30px; 
}