ホバーアクションをつけたい。

Question

ホバーアクションに関してなんですが、マウスをホバーさせた際に文字のカラーを変え、なおかつ下線を発生させるにはどの様にしたら良いのでしょうか。
また、AAAとaaaの間には下線ホバーがつかないもの、文字のカラーが変わるのはaaa箇所のみ。
といったものを作成したいです。

         <ul class="list">
           <li class="card-item">
             <a href="..." class="link-dark"><span class="mgr-10">AAA</span>aaa</a>
           </li>
         </ul>

.card-item a{
  text-decoration: none;
  position: relative;
  display: inline-block;
  transition: .3s;
}
.card-item a::after {
  position: absolute;
  bottom: .3em;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background-color: #9e9063;
  opacity: 0;
  transition: .3s;
}
.card-item a:hover::after {
  bottom: 1;
  opacity: 1;
}
.card-item {
  margin: 5px;
  width: calc(50% - 10px);
}
.card-item{
  font-family: YuMincho;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  color: #444;
  padding-top: 12px;
}
.card-item span{
  font-family: "Adobe Garamond Pro";
  font-weight: normal;
  font-size: 12px;
  line-height: 17px;
  text-align: left;
  color: #a6adb4;
}
.mgr-10{
  margin-right: 10px;
}

Comments

[yambejp]

cssにhoverの記載がありませんが？

[shin]

ホバーに関してのcssはあるんすが、役に立つかわからなかったので記載しておりませんでした。
記載させて頂いたのでご確認頂けますと幸いです。