疑似要素にhoverを効かせる
2023/10/10
CSS
疑似要素にhoverを効かせるには？
疑似要素にhoverを効かせたいけど記述の仕方がわからない、という方向けの記事です。
結論から言うと、
疑似要素を利かせているセレクタにhoverを記述し、その後ろに疑似要素の「before」や「after」を書く。
です。
言葉では理解が難しいので、コードを見てみましょう。 具体的には
セレクタ名：hover：：before(もしくはafter) {（ホバーアクション記述）}
という記述になります。
See the Pen
Untitled by Ryosuke (@Ryosuke-the-flexboxer)
on CodePen.
「Hellow World!!」にカーソルを合わせると疑似要素の「!!」が赤に変化するのが確認できると思います。
記述の順番が逆になるとどうでしょうか？
See the Pen
Untitled by Ryosuke (@Ryosuke-the-flexboxer)
on CodePen.
これだとhoverが効いていないことが確認できます。
疑似要素はとても便利で使い勝手が良いのですが、少しややこしい点もあるので注意が必要ですね。