如何用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; 
}