ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

jQueryで擬似要素の::beforeや::afterの内容を変更する方法

| カテゴリー : JavaScript

CSSを書く時に::before::afterという疑似要素にcontentを指定して装飾に使ったりテキストを表示させることがあります。

しかし疑似要素は非DOMなので、後からJavaScriptで色を変えたりcontentで設定しているテキストを他のものに書き換えることができません。

それでもなんとかしたいという時に使えるアイデアを紹介します。

クラスによってスタイルを上書きしたり元に戻して解決する

まずは次のようにCSSで擬似要素のスタイルを設定します。

ここで設定するスタイルはcontent以外でも構いません。
2つのクラスを用意してそれぞれの疑似要素にスタイルを指定しておいてください。

上記の例でいうと.box_aがついた要素に.box_bのクラスが追加されれば、.box_b::beforeのCSSが適用されるはずです。

クラスの追加・削除はjQueryで行います。

.btn_bのクラスが要素についたりはずれたりすることで、適用されるCSSが切り替わります。

実際に動作するCodePenを作ったので参考にしてください。
ボタンのテキストは疑似要素にcontentを設定して表示されていますが、ボタンをクリックすると内容が切り替わります。

See the Pen MEvQPy by Daisuke Koshimizu (@dkossy) on CodePen.

厳密には疑似要素を操作しているわけではなく、クラスの切り替えによって適用されるCSSを上書きしているに過ぎませんが、こうしたアイデアもあることを覚えておくとどこかで役に立つかもしれません。

以上、jQueryで擬似要素の::beforeや::afterの内容を変更する方法でした。それではまた!

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。