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

jQueryで擬似要素を変更したいと思っても、:before や :after は非DOMなので普通にアクセスすることはできません。そこでどんな方法で変更できるのかまとめました。

デモ

サンプルとしてクリックしたら擬似要素の content プロパティを書き換えるというプログラムを作成しました。

<div class="button"></div>

.button:before {
  content: 'ボタン';
}
.change:before {
  content: 'クリック';
}

HTMLとCSSはこんな感じ。クリックしたら content プロパティを書き換えるために、新たに .change クラスを作ります。

$('.button').on('click', function() {
  $(this).addClass('change');
});

あとは、addClass() すれば書き換えることができます。

<div class="button"></div>

.button:before {
  content: 'ボタン';
}

$('.button').on('click', function() {
  $('head').append('<style>.button:before { content: "クリック"; } </style>');
});

こんな感じで <head> にスタイルを上書きすることもできます。

今回のように変更したいものが content プロパティだけである場合はこの方法を使うことができます。

<div class="button" data-name="ボタン"></div>

.button:before {
  content: attr(data-name);
}

$('.button').on('click', function() {
  $(this).attr('data-name', 'クリック');
});

これはなかなか便利なので覚えておくとよいかと思います。

擬似要素の値を取得することもできたので、記事を書きました！