在 CSS 中使用 div 的宽度悬停过渡时保持嵌套锚点固定

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;
}

空格序列将折叠成一个空格。文本永远不会换到下一行。

DEMO HERE

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>