javascript - Animate of pseudo elements using jQuery - Stack Overflow

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?

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?

• javascript
• jquery
• css

Share Improve this question Follow asked Sep 12, 2012 at 17:06 LuisLuis 3,2731313 gold badges5252 silver badges5959 bronze badges 3

• I'm not sure jquery can do this. You might, however, be able to use CSS3 animations to acplish this (I believe), but it wouldn't be supported on non CSS3 browsers, of course, non CSS3 browsers don't generally support the :after pseudo tag... – Shmiddty Commented Sep 12, 2012 at 17:12
• @Shmiddty: Why not? :after isn't even new to CSS3. – BoltClock Commented Sep 12, 2012 at 19:44
• @BoltClock You're right. It was added in CSS2. My mistake. – Shmiddty Commented Sep 12, 2012 at 19:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

What you are trying to do is extremely hacky and I'd strongly remend 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/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.

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

http://jsfiddle/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;    
}

Use next() instead. Here's how you can achieve exactly that.