aタグをhoverしたときの文字の色を変えたい

Question

前提・実現したいこと

aタグをhoverで下線を出るようにしたら、文字色が元(青)に戻ってしまう

発生している問題・エラーメッセージ

該当のソースコード

nav ul li {
    float: right;
   margin-left: 20px;
   list-style: none;
   margin: 30px;
   
}

nav ul li a{
    position: relative;
    display: inline-block;
    text-decoration:none;
    color: white;
}

nav ul li a:hover::after{
    color: white;
    bottom:-4px;
    opacity: 1;
    visibility: visible;
   
}

nav ul li a::after{
  position: absolute;
  bottom: 2px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background:white;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[itagagaki]

おそらく提示されているコード以外のコードが影響しています。

[m.ts10806]

html含めて全て提示してください。
あと、hoverのときに下線、入れてますか？
提示コードにはa:hover::afterしかhoverに対する指定がないようですが。

Answer 1

遅くなってしまい申し訳ありません。
nav ul li a:hoverを追加して、color:whiteを付けたら
思うようなデザインになりました。

Answer 2

文字色が白だと見づらいのでとりあえずbodyに色をつけてためしてください

body{background-Color:gray;}

その上でHTMLが以下で試しましたがご提示のソースでは現象が確認できません

<nav>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</nav>