ホバーアクションに関してなんですが、マウスをホバーさせた際に文字のカラーを変え、なおかつ下線を発生させるにはどの様にしたら良いのでしょうか。
また、AAAとaaaの間には下線ホバーがつかないもの、文字のカラーが変わるのはaaa箇所のみ。
といったものを作成したいです。
html
1 <ul class="list"> 2 <li class="card-item"> 3 <a href="..." class="link-dark"><span class="mgr-10">AAA</span>aaa</a> 4 </li> 5 </ul>
css
1.card-item a{ 2 text-decoration: none; 3 position: relative; 4 display: inline-block; 5 transition: .3s; 6} 7.card-item a::after { 8 position: absolute; 9 bottom: .3em; 10 left: 0; 11 content: ''; 12 width: 100%; 13 height: 1px; 14 background-color: #9e9063; 15 opacity: 0; 16 transition: .3s; 17} 18.card-item a:hover::after { 19 bottom: 1; 20 opacity: 1; 21} 22.card-item { 23 margin: 5px; 24 width: calc(50% - 10px); 25} 26.card-item{ 27 font-family: YuMincho; 28 font-weight: 500; 29 font-size: 14px; 30 line-height: 20px; 31 text-align: left; 32 color: #444; 33 padding-top: 12px; 34} 35.card-item span{ 36 font-family: "Adobe Garamond Pro"; 37 font-weight: normal; 38 font-size: 12px; 39 line-height: 17px; 40 text-align: left; 41 color: #a6adb4; 42} 43.mgr-10{ 44 margin-right: 10px; 45}
cssにhoverの記載がありませんが?
ホバーに関してのcssはあるんすが、役に立つかわからなかったので記載しておりませんでした。
記載させて頂いたのでご確認頂けますと幸いです。