JavaScriptは疑似スタイルの修正を実現します。

プロジェクトでは、JavaScriptを使って、動的に元素（：before、：after）として制御する必要がありますが、JavaScriptやjQueryには偽の選択がないことはよく分かります。ここではいくつかのよくある方法をまとめます。
HTML
＜p class=「red」Hi，this is a plin-old，sad-looking paragraph.

CSS

.red::before {
content: 'red';
color: red;
}

 
方法1
JavaScriptまたはjQueryを使って

要素の類名を切り替えて、スタイルを修正します。

.green::before {
content: 'green';
color: green;
}
$('p').removeClass('red').addClass('green');

 
 
方法2
既存のスタイルで新しいスタイルを動的に挿入します。

document.styleSheets[0].addRule('.red::before','color: green');
document.styleSheets[0].insertRule('.red::before { color: green }', 0);

 
方法3
新しいスタイルシートを作成し、JavaScriptまたはjQueryを使ってに挿入します。

// Create a new style tag
var style = document.createElement("style");

// Append the style tag to head
document.head.appendChild(style);

// Grab the stylesheet object
sheet = style.sheet

// Use addRule or insertRule to inject styles
sheet.addRule('.red::before','color: green');
sheet.insertRule('.red::before { color: green }', 0);

 
jQuery

$('<style>.red::before{color:green}</style>').appendTo('head');

 
方法4
HTML 5のdata-属性を使用して、属性の中でatr()を使って動的に修正します。

<p class="red" data-attr="red">Hi, this is plain-old, sad-looking paragraph tag.</p>
.red::before {
content: attr(data-attr);
color: red;
}
$('.red').attr('data-attr', 'green');

以上は私達がみんなのために整理した四つの方法です。もし皆さんがもっといい方法があれば、下のメッセンジャーエリアで検討してもいいです。