javascript - JQuery 更改 :after 的“顶部”

Question

我正在尝试更改元素中 :after 的“顶部”属性。

CSS：

.mymessage:after
{
top:20px;
}

我怎样才能动画它说，40px？

Answer 1

Pseudoelements aren't part of the DOM, so in principle they are inaccessible with Javascript. The best you can do is add a stylesheet to your page that adds a new rule for the pseudoelement.

Answer 2

您可以让 jquery 向元素添加一个类，$('.mymessage').addClass('active')然后为其创建样式并设置 css 动画

.mymessage:after
{
top:20px;
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-ms-transition: all .25s linear;
-o-transition: all .25s linear;
transition: all .25s linear;
}

.mymessage.active:after
{
top:40px;
}