html - CSS悬停动画隐藏文本

Question

如果我切换悬停效果，背景会隐藏文本。我应该添加哪个属性，列表点的文本不在“:before”背景下。

我还张贴了一个代码笔链接，这样你就可以很容易地检查我的代码。

谢谢

   <nav>
    <ul>
      <li>#1111111111</li>
      <li>#2222222222</li>
      <li>#3333333333</li>
    </ul>
  </nav>


nav {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #2c3e50;
  width: 100px;
}

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  border-bottom: 1px solid #ecf0f1;
  padding: 10px 0 10px 0;
  position: relative;
  color: red;
}

nav ul li:hover {
  color: green;
}

nav ul li:before {
  position: absolute;
  content: '';
  top:0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: white;
  transition:all 0.3s ease;
  z-index: 0;

}

nav ul li:hover::before {
  width: 100%;
}

代码笔:http://codepen.io/anon/pen/oBXwVB

Answer 1

您可以使用 linear-background 实现此效果并避免使用 :before 选择器，这似乎是更好的方法。

例如

li {
  background: linear-gradient(to right, red 50%, blue 50%);
  background-size: 200% 100%;
  background-position:left bottom;
  transition: all 1s ease-in-out;
}

li:hover {
  background-position:right bottom,
}

正如 beardheadcode 在这个堆栈中所建议的那样:Fill background color left to right CSS

虽然有一个演示: http://jsfiddle.net/75Umu/3/