Исправление вложенного якоря при использовании перехода ширины при наведении на div в CSS

Question

В настоящее время я пытаюсь достичь чего-то, когда при наведении курсора цвет фона будет меняться и анимироваться как «толчок» при изменении ширины от 0% до 100%. Однако, с моим решением, установка div в 0% приводит к тому, что тег привязки не остается в одной строке (разрывы). Как мне это исправить?

Скрипка : https://jsfiddle.net/9hd3v84r/

* {
  padding: 0;
  margin: 0;
}

.navrectangle {
  width: 20Vw;
  height: 100vh;
  background-image: linear-gradient(to right, #002067, #013d98);
}


/* NAV */

a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

img {
  padding-top: 8vh;
  width: 70%;
  margin: auto;
  display: block;
}

.textnav {
  padding-top: 6vh;
  display: block;
  list-style-type: none;
  font-size: 1.3vw;
}

.textnav a {
  margin-left: 3vw;
  width: 100%;
}

.textnav li {
  padding: 2vh 0vh;
  width: 100%;
}

.recpush {
  width: 0%;
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}

.recpush:hover {
  overflow: visible;
  background: #50d986;
  width: 110%;
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}

.textnav li:hover a {
  color: #002067;
}

<div class="navrectangle">
  <nav>
    <a href=""><img src="media/Asset 1.png" alt=""></a>
    <div class="textnav">
      <div class="recpush">
        <li><a href="">NUMBER ONE</a></li>
      </div>
      <div class="recpush">
        <li><a href="">NUMBER TWO</a></li>
      </div>
      <div class="recpush">
        <li><a href="">NUMBER 3</a></li>
      </div>
      <div class="recpush">
        <li><a href="">NUMBER 4</a></li>
      </div>
    </div>

  </nav>
</div>

Спасибо, ребята

Answer 1

Попробуйте это:

CSS:

li a{
  white-space: nowrap;
}

Последовательности пробелов свернутся в один пробел.Текст никогда не будет перенесен на следующую строку.

ДЕМО ЗДЕСЬ

Answer 2

<style>
.recpush li a {
    margin-left: 3vw;
    width: 100%;
    white-space: nowrap;
    float: left;
}
</style>
OR
<style>
.recpush li a {
    margin-left: 3vw;
    width: 100%;
    float: left;
    white-space: pre;
}
</style>