Javascript establecer CSS: después de los estilos

Question

¿Puedes establecer los estilos after de css con Javascript?

lo que permite decir:

$("#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: "''" 
}); 

Una implementación mínima. Lo más probable es que desee realizar un seguimiento de las reglas que agrega para poder eliminarlas. sheet.insertRule devuelve el índice de la nueva regla que puede usar para obtener una referencia para su edición o eliminación.

Editar: funcionalidad básica añadida para convertir un objeto en una cadena de propiedad css por comodidad.