これは、jQueryが実行できる他のすべてのことを含めて、答えるのは簡単な質問になると思います。残念ながら、問題は技術的な問題に帰着します：css：afterおよび：beforeルールはDOMの一部ではありません、ため jQueryのDOMメソッドを使用して変更することはできません。
JavaScriptやCSSの回避策を使用してこれらの要素を操作する方法があります。どちらを使用するかは、正確な要件によって異なります。
私は広く「最良の」アプローチと考えられているものから始めます：
1）所定のクラスを追加/削除する
このアプローチでは、CSSに別の:afterまたは:beforeスタイルのクラスをすでに作成しています。この「新しい」クラスを後でスタイルシートに配置して、オーバーライドすることを確認します。
p:before {
content: "foo";
}
p.special:before {
content: "bar";
}
次に、jQuery（またはバニラJavaScript）を使用して、このクラスを簡単に追加または削除できます。
$('p').on('click', function() {
$(this).toggleClass('special');
});
$('p').on('click', function() {
$(this).toggleClass('special');
});
p:before {
content: "foo";
color: red;
cursor: pointer;
}
p.special:before {
content: "bar";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- 長所： jQueryで簡単に実装できます。複数のスタイルを一度にすばやく変更します。懸念事項の分離を強制します（CSSとJSをHTMLから分離します）
- 短所： CSSは、コンテンツのため、事前に書き込まれなければならない
:beforeか、:after完全に動的ではありません
2）新しいスタイルをドキュメントのスタイルシートに直接追加します
JavaScriptを使用して、スタイル:afterなどの:beforeスタイルをドキュメントスタイルシートに直接追加することができます。jQueryには便利なショートカットはありませんが、幸いJSはそれほど複雑ではありません。
var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');
var str = "bar";
document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');
p:before {
content: "foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
.addRule()そして、関連する.insertRule()メソッドは、今日かなりサポートされています。
バリエーションとして、jQueryを使用してまったく新しいスタイルシートをドキュメントに追加することもできますが、必要なコードはそれほどきれいではありません。
var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');
var str = "bar";
$('<style>p.special:before{content:"' + str + '"}</style>').appendTo('head');
p:before {
content: "foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
値を追加するだけでなく、値を「操作する」ことについて話している場合は、別のアプローチを使用して既存のやスタイルを読み取る:after:beforeこともできます。
var str = window.getComputedStyle(document.querySelector('p'), ':before')
.getPropertyValue('content');
var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');
console.log(str);
document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');
p:before {
content:"foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
jQueryを使用document.querySelector('p')する$('p')[0]場合は、少し短いコードで置き換えることができます。
- 長所：任意の文字列をスタイルに動的に挿入できます
- 短所：元のスタイルは変更されず、オーバーライドされるだけです。繰り返し（ab）使用すると、DOMが任意に大きくなる可能性があります
3）別のDOM属性を変更する
CSSで使用attr()して、特定のDOM属性を読み取ることもできます。（ブラウザがをサポートしている場合は:before、それもサポートattr()します。）これをcontent:いくつかの慎重に準備されたCSSで組み合わせることにより、およびのコンテンツを動的に変更できます（マージンや色などの他のプロパティは変更できません）。:before:after
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
JS：
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
CSSを事前に準備できない場合は、これを2番目の手法と組み合わせることができます。
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');
$('p').on('click', function () {
$(this).attr('data-before', str);
});
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');
$('p').on('click', function() {
$(this).attr('data-before', str);
});
p:before {
content: "foo";
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- 長所：無限の余分なスタイルを作成しない
- 短所：
attr CSSでは、URLやRGBカラーではなく、コンテンツ文字列にのみ適用できます