【CSS】:hoverにより、::beforeで記述した擬似要素だけ動かす方法

:hoverは理解しているけど、擬似要素だけ動作をつけたい場合はどうやるの？、
という疑問を解決します。

サンプルコード

 command

  <div id="○○">
    <p>hoverすると上にずれる</p>
  </div>

 css
#〇〇::before{
content:"";
display:block;
width:25px;
height:60px;
background-color:#000000;
position:absolute;
top:-70px;
left:50%;
transition-duration: 0.3s;
}
#〇〇:hover::before{
cursor: pointer;
transform: translate(0px,-10px);
transition-duration: 0.3s;
}

ポイントと実装結果

コードのポイント

CSSの１行目、

#〇〇:hover::before{

です。

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

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

あとは、数値やアニメーションの内容を変えれば、形や位置、変化時間など変更でき、自分になりにアレンジできます。

実装結果

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

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