【CSS】知っていると便利　:hoverで擬似要素だけ変化させる方法

WEB制作において、「:hover」は 必ず使うスキルですよね。

その:hoverは、カーソルを乗せた要素に変化を加えること多いと思います。

色を変えたり、ボーダーを出現させたりしますよね。

そんななかで、

「擬似要素だけ変化や動作をつけたい場合はどうやるの？」

と困っている方に、解決方法を紹介します。

サンプルコード

「トップへ戻るボタン」をサンプルに紹介します。
「TOP」にhoverすると、縦線が上に動いて、トップへ戻ることを促してくれます。

※トップへスクロールするコードは省略します。

See the Pen
Untitled by t.h (@tomtom15)
on CodePen.

コードのポイント

ポイントは

#move:hover::before{

のところです。

「:hover」の後ろに「::before」をつけてあげましょう。

これで擬似要素だけが動きます。

あとは、数値や:before要素の内容を変えれば、自分になりにアレンジできます。

もちろん、擬似要素に after を使用した場合は「::after」です。

詳しく知りたい方はこちらもどうぞ。
いろいろな動きをするWEBデザイン

hover関連の記事も紹介しておきます。