jQuery and pseudo-elements

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.

Answer 2

add CSS:

p.special:before {
    content: "bar";
    position: absolute;
    top : 10px;
}

assuming the style sheet where the code above was put is the first one on the page, use this to change it:

document.styleSheets[0].addRule('p.special:before','top: 15px;');