aタグで作成したテキストの色が変わらない

flexboxでヘッダーを作ったのですが、aタグを白字にできなくて困っております。

コードは以下です。

HTML

<header>
  <div class="header">
      <ul> 
        <li class="item">
          <a href="#" class="nav-link">Home</a>
        </li>
        <li class="item">
          <a href="#" class="nav-link">About</a>
        </li>
        <li class="item">
          <a href="#" class="nav-link">Info</a>
        </li>
        <li class="item">
          <a href="#" class="nav-link">Menu</a>
        </li>
        <li class="item">
          <a href="#" class="nav-link">Connect</a>
        </li>
      </ul>
    </div>
</header>

CSS

header {
  width: 100%;
  height: 45px;
  border-bottom: solid 1px #fff ;
  background-color: #423F6E;
}

.header ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 22%;
}

.item {
  font-size: 1.3rem;
}

a {
  color: #fff;
  display: block;
  position: relative;
  text-decoration: none;
}

a::before,
a::after {
  border-bottom: solid 1px rgb(255, 255, 255);
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
a::before {
  left: 50%;
}
a::after {
  right: 50%;
}
a:hover::before,
a:hover::after {
  width: 50%;
}

tagの名称を変えて色々試したのですが、なぜか色が変わりません。。。
宜しくお願い致します。