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

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

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

kuma_kuma_

2020/09/28 20:23

質問に書かれているURLのデモ、一度移動しないと確認できないですね（不親切な．．．）デモですと3パターンありました。まずどれでしょう？また図形の下に矢印であっていますか？それとも https://lopan.jp/css-animation-hover/ transition-delayについてで行っているような処理を矢印で行いたいという事でしょうか？

sora135

2020/09/28 22:03

ご回答ありがとうございます！すごく助かります。提示いただいたサイトで合っています！transition-delayです。 text-button → この、text-button の文字横スペースにホバーしたら伸びる矢印を作りたいです。(transition-delayで伸びる) 普段はdisplay:noneかopacity:0で隠れてるイメージです。拙い文章ですが、伝わりましたでしょうか????

yambejp

2020/09/29 00:22

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

行動規範の内容に同意します

回答2件

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

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

これを修正すれば、

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

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

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

css
1.view-more-hover{
2  position: relative;
3  transition:all 1s ease-out;
4  opacity:0.3;
5  display: inline-block; /*追加*/
6  width: 50px; /*追加*/
7  height: 20px; /*追加*/
8}
9.view-more-hover::before{
10  content: "";
11  display: block;
12  position: absolute;
13  top: 8px;
14  left: 0px;
15  width: 100%;  /*修正*/
16  height: 2px;
17  background: #666;
18}
19.view-more-hover::after{
20  content: "";
21  display: block;
22  position: absolute;
23  top: 0;
24  right: 1px;  /*修正*/
25  width: 15px;
26  height: 15px;
27  border: 2px solid;
28  border-color: transparent transparent #666 #666;
29  transform: rotate(-135deg);
30}
31
32.view-more-hover:hover{
33  opacity:1;
34  width: 200px;  /*追加*/
35}

投稿2020/09/29 01:15

総合スコア33715

2020/09/29 21:25

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

行動規範の内容に同意します

こんにちは。

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

サンプル

css
1.view-more-hover::before{
2transition:all 2s ease-out;
3}
4.view-more-hover::after{
5transition:all 2s ease-out;
6}
7
8.view-more-hover:hover::before{
9  width:173px;
10} 
11.view-more-hover:hover::after{
12  left: 152px;
13} 
14