文字落后于渐变

Question

我还在制作一个带有滚动控件的reponsive菜单。我在菜单上添加了一个渐变，但是我希望，渐变位于我的链接前面并隐藏在它后面。这是JSFiddle，你可以测试它。

你可以在我的菜单上看到我的渐变CSS

#page .page-nav {
  background: white -webkit-linear-gradient(left, transparent 50px, red);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-position: right;
}

任何解决方案，该怎么做？