Question

I tried to dynamically change the position of an element which is defined in CSS with :after.
Using this:

$(function(){
    $('div::after').css({'top':'20px'})
})

But it doesn’t work. Are there any ways to change the position?

Answer 1

You can’t. Content created by :after or :before is not part of the DOM and therefore cannot be selected or modified.

If you have a look at this example fiddle and inspect the DOM in Firebug or similar you will see that the pseudo-element is not present in the DOM tree.

A potential solution would be to apply a class to the element you want to change, and to style that class appropriately in CSS:

$("div").addClass("newClass");

See this fiddle for an example.