疑似要素の仕様
疑似要素にクラスやIDがつけられません。
したがって、transitionや他CSSのクラスアニメーションなどで制御するのは困難です。
が、今回はこの仕様をゴリ押しでカバーしていきたいと思います。
2つの疑似要素を疑似的に1つとして扱う
CSSのみでの解決方法
疑似要素にクラスやIDはつけられませんが、疑似要素の親要素のクラスを読み取って制御することができます。
そこで、親となる要素に二つのクラスをつけ、それぞれに対応する同じ疑似要素をつくってあげます。
index.html
<div class="hoge fuga"></div>
index.css
.hoge:before{
content: "I'm hoge!";
}
.hoge.fuga:before{
content: "I'm fuga!";
}
この場合、より詳細に記述されたCSSの.hoge.fuga:beforeが優先されるため、疑似要素の中身は"I'm fuga!"となります。
これを利用してjQueryなどでfugaのクラスを消すとhogeのクラスが適応され、疑似要素の中身をまさに疑似的に変えることができます。
疑似要素は存在し続ける判定になるので、hogeとfugaにtransitionなどをつけるとCSSのクラスアニメーションをしたことと同じ動作をします。
JSでの解決方法
これはコメントでご指摘頂いた方法ですが、js側でシングルclassを約束するコードで運用することで、CSSをより(わずかに)簡単に記述することができますが、個人的にはCSSで制御したほうが実装上は楽そうです。
JSでの実装は下のようになります。
index.html
<div id="box" class="hoge fuga"></div>
index.css
.hoge:before{
content: "I'm hoge!";
}
.fuga:before{
content: "I'm fuga!";
}
index.js
$("#box").click(function() {
if($(this).hasClass("fuga")){
$(this).attr("class","hoge");
}else{
$(this).attr("class","fuga");
}
})
まとめ
疑似要素にクラスを付けたいと思うことは少ないかと思いますが、疑似的に動かすことはできるということで一応書き残させていただきました。
記事を読んでもあまりわからない方は
index.html
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" />
<link rel="stylesheet" type="text/css" href="./index.css" />
<script src="./index.js" />
</head>
<body>
<div id="box" class="hoge fuga"></div>
</body>
index.css
.hoge::before {
content: "click me!";
position: absolute;
background-color: blue;
transition: 0.2s;
height: 100px;
width: 100px;
}
.hoge.fuga::before {
content: "click me!";
background-color: red;
/* 後はhogeから継承 */
}
index.js
$(function(){
$("#box").click(function(){
$("#box").toggleClass("fuga");
})
})
このコードを試していろいろいじると分かるかもしれません。
初投稿なので、いろいろ助言を下されば幸いです。
コメントでのご指摘に基づいて編集しました