【CSS】テキスト下で動く矢印【小技】
今回は、前回書いたとおりCSSの小技について書いていきたいと思います。
それでは早速見ていきましょう!
See the Pen
text_arrow by piko525 (@piko525)
on CodePen.
ボタンなどによく見られる矢印で、カーソルを載せると矢印が右へ移動します。
■矢印の作り方
①矢印はbeforeとafterの疑似要素を使って作成する。
→今回の場合は、.btnの疑似要素に作成しています。
②疑似要素を使って作成した矢印をpositionで配置する。
→今回の場合は、.btnにposition: relativeを指定し、疑似要素2つにposition: absoluteで配置しています。
③回転させたい方の疑似要素(今回は.btn::after)にtranslate: rotateで回転させる。
コードの方も載せておきます。
■HTML
<div class="btn">カーソルを載せると矢印が移動する。</div>
■CSS
* { box-sizing: border-box; padding: 0; margin: 0; } .btn { cursor: pointer; position: relative; width: 300px; padding: 10px; margin: 50px; color: white; background: darkblue; } /* 矢印の下の部分 */ .btn::before { position: absolute; bottom: 8px; right: 11px; content: ""; width: 40px; height: 2px; background: white; } /* 矢印の上の部分 */ .btn::after { position: absolute; bottom: 6px; right: 17px; content: ""; width: 2px; height: 20px; background: white; transform: rotate(-45deg); /* 左方向に45度回転 */ } /* アニメーション */ .btn:hover::before { right: 0; transition: .3s ease-out; } .btn:hover::after { right: 6px; transition: .3s ease-out; }
アニメーションはtransitionで実装しています。
今回の場合だと、ボタンにカーソルを乗せると11px右に移動しています。