Animating :after using Jquery

Question

I cant animate the :after of my ul. Here is the code in css:

#slider .mypagination ul::after
{
    content: "";
    width:25%;
    bottom: 0;
    left:0;
    position: absolute;
    border-top:1px solid #7accc8;
    transition:0.3s;
}

and this is my jquery codes

$(".mypagination li").click(function(){
    $("#slider .mypagination ul:after").css({
        "left":"100px"
    },300);
})

the click is working. i test it using console.log("click"). Can anyone help me...

I think you forgot your second `:` in the jQuery code. `ul::after` — Michael Schmidt, Sep 01 '16 at 09:56

score 0 · Accepted Answer · answered Sep 01 '16 at 09:51

You can't acces :after, because it's not a part the DOM. Therefore it is not accessible by any JavaScript.

There is a workaround for this though. Add a class to the element you want to animate width jquery.

$(".mypagination li").click(function(){
  $("#slider .mypagination ul").addClass("animationClass")
}

Then animate it with css.

#slider .mypagination ul:after {
  left: 0;
  transition: all 300ms ease;
}

#slider .mypagination ul.animationClass:after {
  left: 100px;
}

I haven't checked if this code actualy works, but you can give it a try.

Animating :after using Jquery

1 Answers1