Wie ändert man dynamisch das CSS eines Pseudoelements mit JQuery?

Question

Ich habe ein Pseudo-Element möchte ich die top: von ändern: mit JQuery Variable und abgerufen

.content:after { 
    top: 30px; //this will change 
} 

Das Ausmaß der Änderung ist:

var $position = $(this).offset().top; 

Ich weiß, dass Sie nicht .css() verwenden können, eine Pseudo zu verändern elements CSS und dass die bevorzugte Methode ist, eine vorhandene Klasse umzuschalten. Aber das wird nicht funktionieren, da Regeln in meiner Klasse dynamisch wären.

Ich bin ein wenig fest, wie man das macht. Hätte jemand Vorschläge?

Answer 1

:after entspricht dem Hinzufügen eines untergeordneten Elements zum Ende des ausgewählten Elements. Wenn es möglich ist, könnten Sie den Stil auf ein neues untergeordnetes Element verschieben, das Sie mit JQuery ändern können. So würde Ihre html wie folgt aussehen:

<div class="content"> 
    ... other content ... 
    <div class="content-after"></div> 
</div> 

css:

.content > .content-after { 
    top: 30px; 
}