JQuery change 'top' of :after

Question

I am trying to change the 'top' attribute of :after in an element.

CSS:

.mymessage:after
{
top:20px;
}

How can I animate it to say, 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

You could get jquery to add a class to the element $('.mymessage').addClass('active') then create styles for that and set css animations

.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;
}