MENU

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

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

デモ

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

1. クラスを付ける

<div class="button"></div>
.button:before {
  content: 'ボタン';
}
.change:before {
  content: 'クリック';
}

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

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

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

2. スタイルを上書き

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

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

3. data-属性を使う

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

<div class="button" data-name="ボタン"></div>
.button:before {
  content: attr(data-name);
}
$('.button').on('click', function() {
  $(this).attr('data-name', 'クリック');
});

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

2016.12.15 追記

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

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