CSSの擬似要素::beforeや::afterを使って、文字列や画像等を挿入することありますよね。挿入したい内容は、下記のように、contentプロパティの値に指定しておけば、要素の直前か直後にCSSだけで擬似的に挿入できます。

要素名::before{
 content: 値;
}

要素名::after{
 content: 値;
}

このcontentプロパティの値を動的に変更したい時、jQueryを使用するのであれば、セレクタで、疑似要素::beforeまたは::afterを指定してアクセスすればいいのでは…？と思ってしまいますが、疑似要素はセレクタで直接指定することができません。そもそも擬似要素は非DOMであるため、JavaScriptから操作することができないようです。

※）:beforeと::beforeの違い
CSS3では、擬似クラスと区別するために、擬似要素は::beforeや::afterのようにコロン2つで書くようになっています。

疑似要素 (Pseudo-elements)

content:attr(属性名)を使って変更する

contentプロパティで挿入できるコンテンツは、文字列や画像以外にもあります。（詳しくは下記参照）

content－スタイルシートリファレンス - HTMLクイックリファレンス

その中でattr()は、()内に属性名を指定すると、擬似要素が設定されている要素の属性の値を、contentプロパティの値として指定することができます。

要素名::before{
  content: attr(属性名);
}

下記の例は、カスタムデータ属性(data-*)を使って、テキストの表示を変更しています。

See the Pen KzLKXa by kitaoka (@kitaoka) on CodePen.

＜HTML＞

<div class="item" data-item="NEW!">商品名</div>

カスタムデータ属性を指定します。data-のハイフンの後は1文字以上の任意の名前をつけます。

＜CSS＞

.item::before {
   content: attr(data-item); /* ここが重要!! */
}

contentプロパティの値に、attr()でカスタムデータ属性を指定しておきます。

＜JavaScript＞ ※jQueryを使用しています。

var item = $('.item');
var c = 0;
setInterval(function(){
  c++;
    item.attr('data-item', (c % 2 == 0) ? 'NEW!' : 'ネット限定!'); /* 属性値を変更 */
}, 2000);

2秒ごとにカスタムデータ属性の値を変更するようにしています。data-itemの値が変更されると、content: attr(data-item)の値も変更されるので、擬似要素で追加した内容の表示が変化します。

ただ、テキストのみを変更したい時には、上記の方法を使うことができますが、スタイルや画像も変更する場合は、クラスを付ける、スタイルを上書きする等の他の方法を使う必要があります。

jQueryでCSSの擬似要素:beforeや:afterのプロパティを変更する方法３種類

contentプロパティで指定する内容は、あくまで擬似的に挿入するものであって、ソースに記述する程でもない内容に利用するのがよいかと思います。使いどころは多くないかもしれませんが、覚えておくと便利ではないでしょうか。