jquery - 如何使用JQuery动态更改伪元素的CSS？

我有一个伪元素，我想更改以下元素的top:：

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

更改量是可变的，可以使用JQuery检索：

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

我知道您不能使用.css()更改伪元素CSS，并且首选方法是切换现有类。但这不会起作用，因为我班上的规则是动态的。

我对如何解决这个问题有些困惑。有人有什么建议吗？

最佳答案

:after等效于将子元素添加到所选元素的末尾。因此，如果可能的话，可以将样式移到新的子元素，您可以使用JQuery对其进行更改。因此，您的html如下所示：

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

CSS：

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