CSSの::afterと::beforeは疑似要素と呼ばれ、対象の要素に疑似的に要素を追加して装飾を適応するセレクタです。
例えば、::beforeを使えば、文字テキストの前にアイコン画像を付けることができます。
HTML
<p class="text">テキストの前にアイコンを表示する。</p>
CSS
.text{
line-height: 40px;
font-weight : bold;
}
.text::before {
content: '';
display: inline-block;
height: 40px;
width: 40px;
background-image: url(./new.png);
background-size: contain;
vertical-align: middle;
background-repeat: no-repeat;
}
実行結果
NEWというアイコン(new.png)が、::before属性によって追加されています。もちろん、::afterを使えば、文字テキストの後ろにアイコン画像がきます。
では、これらの疑似要素をJavaScriptで直接制御することはできるのでしょうか？ 上の例の場合、テキストをクリックしたらNEWアイコンは非表示にする、といった具合です。
答えはNoです。「疑似要素はDOM要素ではない」ため直接の操作を行うことはできません。
例えば、以下のようにクリックイベント”removeNewIcon”を追加して、before属性を取り除いてみます。実際の動作はbefore属性はclassから削除されずに、NEWアイコンは残ったままになります。
HTML
<p class="text" onClick="removeNewIcon(this)">テキストの前にアイコンを表示する。</p>
JS
function removeNewIcon(target){
target.classList.remove("text:before"); //before属性はremoveされずに、NEWアイコンは残ったまま。
}
疑似要素が適応されたセレクタを操作する。
疑似要素で追加したものはずっとそのまま残ってしまうのか？と思うかもしれません。しかし、あくまでも疑似要素が操作できないだけで、「疑似要素が適応されたセレクタ」は制御することはできます。
上の例では”.test”が該当します。ただし、.textを削除してしまうと本来.textで指定していたスタイルまでもが削除されてしまいます。そのため、疑似要素を制御したい場合には「別のセレクタに疑似要素を適応する」ようにします。
HTML
<p class="text text_new" onClick="removeNewIcon(this)">テキストの前にアイコンを表示する。</p>
CSS
.text{
line-height: 40px;
font-weight : bold;
}
.text_new::before {
content: '';
display: inline-block;
height: 40px;
width: 40px;
background-image: url(./new.png);
background-size: contain;
vertical-align: middle;
background-repeat: no-repeat;
}
JS
function removeNewIcon(target) {
target.classList.remove("text_new");
}
アイコンを追加するためのクラス”text_new”を新たに準備し、それに対して::before属性を追加しています。アイコンを削除する場合にはこの”text_new”をclassより削除します。
