【jQuery】擬似要素（::before/::after）を動的に変更する完全ガイド｜data属性・CSS変数・クラス切り替えまで

CSSの ::before / ::after 擬似要素はjQueryや通常のJavaScriptからDOMとして直接アクセスできません。しかし data-*属性・CSS変数・クラス切り替え・styleタグの挿入 という間接的なアプローチでJavaScriptから動的に変更できます。

jQueryから擬似要素を直接変更できない理由

擬似要素（::before / ::after）はCSSで生成される仮想的な要素であり、実際のDOM要素ではありません。そのため $("#el::before") などでセレクトしてもjQueryには何も返ってきません。

// これはどれも動作しない
$('#target::before').css('content', '★');   // NG: 空のjQueryオブジェクト
$('#target').find('::before').text('★');     // NG: 擬似要素はDOMにない
document.querySelector('#target::before');   // NG: null が返る

data-*属性 + CSS attr()でcontentを変更する

CSS の content: attr(data-xxx) を使うと、HTMLのdata属性の値をそのまま content に表示できます。jQueryでdata属性を書き換えることで擬似要素のテキストが変わります。

CSSの設定

.badge::after {
  content: attr(data-count);  /* data-count属性の値を表示 */
  display: inline-block;
  background: #ef4444;
  color: #fff;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
  margin-left: 4px;
}

HTMLとjQuery

<button class="badge" data-count="3">通知</button>

$(function () {
  // data-count属性を変更 → ::after の content が変わる
  $('#update-btn').on('click', function () {
    var current = parseInt($('.badge').attr('data-count')) || 0;
    $('.badge').attr('data-count', current + 1);
  });

  // 0件の時はバッジを非表示にする
  function updateBadge(count) {
    $('.badge')
      .attr('data-count', count)
      .toggleClass('badge--empty', count === 0);
  }
});

CSSクラスの切り替えで擬似要素のスタイルを変える

複数の状態（通常・ホバー・アクティブ・エラーなど）に対応するCSSを事前に書いておき、jQueryでクラスを切り替えます。content以外のプロパティ（色・サイズ・アイコン）も変更できます。

/* デフォルトの ::before */
.status-item::before {
  content: "●";
  color: #94a3b8;  /* グレー */
  margin-right: 6px;
}

/* 成功状態 */
.status-item.is-success::before {
  content: "✓";
  color: #10b981;  /* 緑 */
}

/* エラー状態 */
.status-item.is-error::before {
  content: "✕";
  color: #ef4444;  /* 赤 */
}

$(function () {
  // バリデーション結果に応じてクラスを切り替え
  function setStatus($item, status) {
    $item
      .removeClass('is-success is-error')
      .addClass(status === 'success' ? 'is-success' : 'is-error');
  }

  $('#submit-btn').on('click', function () {
    var val = $('#name-input').val();
    var $status = $('.status-item');

    if (val.length >= 2) {
      setStatus($status, 'success');
    } else {
      setStatus($status, 'error');
    }
  });
});

CSS変数（カスタムプロパティ）で任意のプロパティを変更する

CSS変数を使うと content 以外のプロパティ（色・サイズ・背景画像など）もJavaScriptから動的に変更できます。element.style.setProperty("--変数名", 値) で設定します。

.highlight {
  --pseudo-color: #0284c7;       /* デフォルト色 */
  --pseudo-width: 3px;           /* デフォルト幅 */
}

.highlight::before {
  content: "";
  display: block;
  width: var(--pseudo-width);
  height: 100%;
  background: var(--pseudo-color);
  position: absolute;
  left: 0;
  top: 0;
}

$(function () {
  // CSS変数を変更して擬似要素の色・幅を動的に変える
  $('#color-red').on('click', function () {
    document.querySelector('.highlight').style
      .setProperty('--pseudo-color', '#ef4444');
  });

  $('#color-green').on('click', function () {
    document.querySelector('.highlight').style
      .setProperty('--pseudo-color', '#10b981');
  });

  // jQueryと組み合わせる場合は [0] でネイティブDOM要素を取得
  $('.highlight').each(function () {
    var color = $(this).data('color') || '#0284c7';
    this.style.setProperty('--pseudo-color', color);
  });
});

styleタグを動的に挿入する（最終手段）

上記の方法が使えない場合、<style> タグを動的にDOMに追加する方法があります。IDセレクターと組み合わせることで特定要素の擬似要素だけを対象にできます。

$(function () {
  function setPseudoContent(selector, pseudoEl, content) {
    var id    = 'dynamic-pseudo-style';
    var $style = $('#' + id);

    // 既存のstyleタグを再利用（なければ作成）
    if ($style.length === 0) {
      $style = $('<style>').attr('id', id).appendTo('head');
    }

    // CSSを上書き
    $style.text(selector + pseudoEl + ' { content: "' + content + '"; }');
  }

  // 使用例
  setPseudoContent('#target', '::before', '新しいテキスト');
});

方法の比較と使い分け

まとめ

jQueryから擬似要素を直接変更することはできませんが、間接的な4つのアプローチで動的な変更が実現できます。

• テキストを変えたい: data-*属性 + content: attr(data-xxx)
• パターンが決まっている: CSSクラスを切り替える（最もシンプルで高パフォーマンス）
• 色・サイズなど任意のプロパティ: CSS変数 + style.setProperty()
• それでも対応できない場合: styleタグを動的に挿入（エスケープに注意）

関連記事: attr()完全ガイド / addClass/removeClass/toggleClass完全ガイド

よくある質問（FAQ）