hoverしたら線が伸びるタイプのボタンはどう組むのでしょうか。
なんとなく、:hoverと::before要素で組むんだまでは辿り着いたのですが、
真似てもうまくいかず・・・。
理想として思っている上の図を動かすことで
動きは.itemをhover前には6pxの線とmoreが見えて、
.itemをhoverすると6pxの線が10pxの線になり同時にmoreボタンも4px右に移動した形になることです。
もちろん、hoverを外したら、元の6px線とmoreボタンの位置に戻っていくという一連の動きが表現したいです。
線の位置は恐らく今のままで良いです。
伸びる方向は右へ6pxから10pxまで伸びることですね。
うまく動かないことから間違っているコードを組んでいることはわかりますが、
どうすれば正しく組めるのか全然糸口もわからない状態です。
こう組むのよと教えて頂けるととても助かります。
html
1<div class="item"> 2<a href="#"> 3<span class="more-btn">more</span> 4</a> 5</div>
css
1.more-btn{ 2position: relative; 3display: block; 4overflow: hidden; 5} 6.more-btn::before{ 7content: ""; 8display: inline-block; 9margin-right: 1em; 10width: 6px; 11position: absolute; 12background-color: #000; 13height: 1px; 14} 15.item:hover .more-btn::before{ 16width:10px; 17background-color:#000; 18}
線の位置や伸びる方向は現状のままでいいということですか?
線の位置は現状のままで大丈夫です。コードを見て弄れるのではと思っておりまして・・・。伸びる方向は右へで6pxから10pxに伸びることが理想です。
試した所、現状でも右に伸びるようになっています。ホバー時に backgroud-color:#fff; となってますが、「background」の「n」が抜けています。ホバー時に真っ白にすると(背景が白なら)見えなくなると思いますが、いいのでしょうか?
そのCSSではその図のような見た目にはならないですが、例えばMOREをどのように中央に配置しているのでしょうか。関連するCSSをすべて載せてもらえますか?
なんどもすみません!自分で何とかしようと最小限だけアップしたのですが、やはりどうしてもとなって…。text-align:centerとline-heightをボックスの大きさまでつけて真ん中にしてます。