jquery - Javascript set CSS :after styles

Question

Can you set the :after styles of css with Javascript?

So lets say:

$("#foo li:after").css("left","100px");

Answer 1

var addRule = (function(style){
    var sheet = document.head.appendChild(style).sheet;
    return function(selector, css){
        var propText = Object.keys(css).map(function(p){
            return p+":"+css[p]
        }).join(";");
        sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
    }
})(document.createElement("style"));

addRule("p:before", {
    display: "block",
    width: "100px",
    height: "100px",
    background: "red",
    "border-radius": "50%",
    content: "''"
});

A minimal implementation. You most likely would want to keep track of the rules you add so you can remove them. sheet.insertRule returns the index of the new rule which you can use to get a reference to it for editing or removal.

Edit: added basic functionality to convert an object into a css property string for convenience.