text-dividerをホバー時に左の横線が右に消えていく、右の横線が左に消えていくようなアニメーションを実装したいです(アニメーション時間は1秒を想定)。
この場合、.text-divider:hover {}でどのようなコードを書けば良いでしょうか。
html
1<div class="text-divider">+ MORE</div>
CSS
1.text-divider { 2 display: flex; 3 align-items: center; 4 color:gray; 5 font-size:15px; 6} 7.text-divider::before, 8.text-divider::after { 9 content: ''; 10 height: 1px; 11 background-color: gray; 12/* flex-grow: 1; */ 13 width:40%; 14 margin-left:20px; 15 margin-right:20px; 16 transition: 0.6s; 17}
途中で送信されたんですかね。
質問は編集できますので、追記お願いします。
ソースコードはMarkDownの<code>ブロック内に貼り付けてご提示ください。
ご指摘ありがとうございます。
こちら修正いたしました。
どうかよろしくお願いします。
私がコメントで解説するより下記質問の回答を見た方が視覚的で分かりやすいと思うので参照してください。
https://teratail.com/questions/238564
因みに編集中に右側に表示されているプレビューが我々が見えている物です。
プレビューを見ながら調整しましょう。
失礼しました。
こちらでよろしかったでしょうか。
ご確認願います。
回答1件
あなたの回答
tips
プレビュー