MENU

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

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

デモ

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

1. クラスを付ける



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

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


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

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

2. スタイルを上書き



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

$('.button').on('click', function() {
  $('head').append('');
});

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

3. data-属性を使う

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



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

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

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

2016.12.15 追記

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

JS/jQueryでCSS疑似要素である:before:afterのプロパティを取得し変更する