hover時に、にゅる〜と伸びる矢印→をcssで実装したい！

Question

ホバーした時に矢印がニュル〜と動くようにしたいです。

https://diwao.com/2017/06/css-hover-underline-animation.htmlこの動きを直線ではなく矢印で表現したいです。

html
<span class="view-more-hover></span>

css
.view-more-hover{
position: relative;
transition:all 2s ease-out;
opacity:0.3;
}
.view-more-hover::before{
content: "";
display: block;
position: absolute;
top: 8px;
left: 0px;
width: 73px;
height: 2px;
background: #666;
}
.view-more-hover::after{
content: "";
display: block;
position: absolute;
top: 0;
left: 52px;
width: 15px;
height: 15px;
border: 2px solid;
border-color: transparent transparent #666 #666;
transform: rotate(-135deg);
}

.view-more-hover:hover{
opacity:1;
}

このコードだとhoverした時になんの変化もできませんでした。(opacityも効かない)

googleで様々検索したのですが、見つけきレなかったので質問させていただきました。
参考サイト等教えていただけすと嬉しいです！よろしくお願いいたします

Comments

[kuma_kuma_]

質問に書かれているURLのデモ、一度移動しないと確認できないですね（不親切な．．．）
デモですと3パターンありました。まずどれでしょう？
また図形の下に矢印であっていますか？

それとも
https://lopan.jp/css-animation-hover/
transition-delayについて
で行っているような処理を矢印で行いたいという事でしょうか？

[sora135]

ご回答ありがとうございます！すごく助かります。

提示いただいたサイトで合っています！transition-delayです。

text-button →

この、text-button の文字横スペースにホバーしたら伸びる矢印を作りたいです。(transition-delayで伸びる)
普段はdisplay:noneかopacity:0で隠れてるイメージです。

拙い文章ですが、伝わりましたでしょうか????

[yambejp]

svgとかでやるほうが簡単だと思いますが、spanが必達なのでしょうか？

Answer 1

まず、提示のコードでは " が不足しています。

- <span class="view-more-hover></span>
+ <span class="view-more-hover"></span>

これを修正すれば、

このコードだとhoverした時になんの変化もできませんでした。(opacityも効かない)

変化するようになります。ただし、ラインの上にピッタリとマウスカーソルを載せないと反応しないです。ラインの高さが2pxしかないのでなかなか難しいですね。

反応する高さを広げるには、span要素に適切な高さと幅を設定します。ただし、spanはインライン要素なので中身がないと高さも幅も0になりますので、display: inline-block;でインラインブロック要素に変換します。
::before疑似要素の幅は100%にします。::after疑似要素は right で右端に配置します。
これで、:hover に幅を設定すれば矢印が伸びます。

.view-more-hover{
  position: relative;
  transition:all 1s ease-out;
  opacity:0.3;
  display: inline-block; /*追加*/
  width: 50px; /*追加*/
  height: 20px; /*追加*/
}
.view-more-hover::before{
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  left: 0px;
  width: 100%;  /*修正*/
  height: 2px;
  background: #666;
}
.view-more-hover::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 1px;  /*修正*/
  width: 15px;
  height: 15px;
  border: 2px solid;
  border-color: transparent transparent #666 #666;
  transform: rotate(-135deg);
}

.view-more-hover:hover{
  opacity:1;
  width: 200px;  /*追加*/
}

Codepenサンプル

Comments

[sora135]

ありがとうございます！初歩的なミスに気付いておりませんでした。すごく助かりました！

Answer 2

こんにちは。

以下を追加してみてはいかがですか？

サンプル

.view-more-hover::before{
transition:all 2s ease-out;
}
.view-more-hover::after{
transition:all 2s ease-out;
}

.view-more-hover:hover::before{
  width:173px;
} 
.view-more-hover:hover::after{
  left: 152px;
} 

Comments

[sora135]

ご丁寧にありがとうございます！思い通りの形にできました。すごく助かりました！

[Lhankor_Mhy]

いえいえ。
ですが、hatena19さんのご回答の方が優れていると思いますので、ご検討ください。

また、ご解決されたようですので、お手数ですが質問を解決済みにしてください。
https://teratail.com/help#resolve-question