jQuery y pseudo-elementos

Question

He cambiado dinámicamente la posición de elemento en que se define en CSS con :after. Traté de cambiar de esta manera:

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

Pero no funciona. ¿Hay alguna forma de cambiar de posición?

Answer 1

No puede. El contenido creado por :after o :before no es parte del DOM y, por lo tanto, no se puede seleccionar ni modificar.

Si echa un vistazo a este example fiddle e inspecciona el DOM en Firebug o similar, verá que el pseudo-elemento no está presente en el árbol DOM.

Una posible solución sería aplicar una clase de elemento que desea cambiar, y el estilo de esa clase apropiadamente en CSS:

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

Ver this fiddle for an example.

Answer 2

complemento CSS:

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

asumiendo la hoja de estilo en el código anterior se puso es el primero en la página, usar esto para cambiarlo:

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