jQuery and pseudo-elements

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


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



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:


See this fiddle for an example.


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;');


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.