jQuery e pseudo-elementi

Question

Ho cambiato dinamicamente la posizione dell'elemento en definito in CSS con . Ho provato a cambiare in questo modo:

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

Ma non funziona. C'è qualche modo per cambiare posizione?

Answer 1

Non è possibile. Il contenuto creato da o :before non fa parte del DOM e pertanto non può essere selezionato o modificato.

Se si dà un'occhiata a questo example fiddle e si ispeziona il DOM in Firebug o simile, si vedrà che lo pseudo-elemento non è presente nell'albero DOM.

Una possibile soluzione potrebbe essere quella di applicare una classe all'elemento che si desidera modificare, e per lo stile che la classe in modo adeguato in CSS:

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

Vedi this fiddle for an example.

Answer 2

add CSS:

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

supponendo che il foglio di stile in cui il codice di cui sopra è stato messo è il primo sulla pagina, utilizzare questo per cambiarlo:

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