jQueryと擬似要素

Question

CSSで定義されたen要素の位置を動的に変更しました。:afterです。 私はそれをこのように変更しようとしました：

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

をしかし、それは動作しません。ポジションを変更する方法はありますか？

Answer 1

できません。 :afterまたは:beforeによって作成されたコンテンツは、DOMの一部ではないため、選択または変更することはできません。

このexample fiddleを見て、FirebugなどのDOMを調べると、擬似要素がDOMツリーに存在しないことがわかります。

潜在的な解決策は、あなたが変更したい要素にクラスを適用すると、CSSで適切にそのクラスのスタイルを次のようになります。

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

はthis fiddle for an exampleを参照してください。

Answer 2

はCSSを追加します。上記のコードが置かれたスタイルシートを想定し

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

はそれを変更するためにこれを使用し、ページ上の最初のものである：

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