Animate of pseudo elements using jQuery

Question

I'm using a:after, it contains right: Ypx.

I want to use animate method in jQuery to move the element (a:after) from Ypx to Zpx, how can I do it?

For example:

[link-text][after]
[link-text]-- moving > --[after]

I know how to do it without animation, just doing a:hover:after { right: Zpx } but how with animation?

Answer 1

What you are trying to do is extremely hacky and I'd strongly recommend you to put make real elements instead of trying to animate pseudo-elements. However, for future reference: the only way of animating a pseudo-element is by inserting a style tag and changing the value in actual CSS, such as...

var styles = document.getElementById("pseudo-mover")
var distance = 100;

var move = function(){
    styles.innerHTML = ".box:after {left: " + distance + "px}";
    distance++;
    if (distance < 200) 
        setTimeout(move, 30);    
}

move()

http://jsfiddle.net/X7aTf/

This is vanilla js, but you could use the step callback in jquery's animate to hook in to jquery's easing and timing functions.

Answer 2

You can use CSS3 transitions to accomplish this, but sadly they are only supported (as far as I know) in FireFox 4+ right now.

http://jsfiddle.net/XT6qJ/1/

#foo:after{
    content:'!';
    display:inline-block;
    border:solid 1px #f00;
    padding:3px;
    width:25px;
    text-align:center;
    -webkit-transition:margin-left 1s;
    -moz-transition:margin-left 1s;    
    -ms-transition:margin-left 1s;
    -o-transition:margin-left 1s;    
    transition:margin-left 1s;    
}
#foo:hover:after{
    margin-left:100px;    
}