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.