CSS hover animation hides text

Question

if I toggle the hover effect, the background hides the text. Which atttribute shoud I add that the text of the listpoints is not under the ":before" background.

I also postet a codepen-link so it is easy for you to check my code.

Thanks

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

Codepen: http://codepen.io/anon/pen/oBXwVB

z-index:-1 to :before, or different html/css...http://codepen.io/anon/pen/BpNdyO — sinisake, Jan 06 '17 at 23:41
@PraveenKumar, works if we set higher z-index to li it self, check codepen above... :) — sinisake, Jan 06 '17 at 23:45
@sinisake Ah... I answered in a different way. What do you think? — Praveen Kumar Purushothaman, Jan 06 '17 at 23:45
z-index: -1 on :before and a higher z-index to li does not work. — ChiefAlu, Jan 06 '17 at 23:47
@ChiefAlu Can you check my answer? Click on run snippet and also see the preview. — Praveen Kumar Purushothaman, Jan 06 '17 at 23:51
@ChiefAlu, it is working,, at least in FF and Chrome... check codepen link above... — sinisake, Jan 06 '17 at 23:52

score 2 · Answer 1 · edited May 23 '17 at 11:53

You could achieve this effect using a linear-background and avoid using the :before selector, which seems to be a better approach.

For example

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

As suggested by beardheadcode in this stack: Fill background color left to right CSS

There is although a demo: http://jsfiddle.net/75Umu/3/

score 0 · Accepted Answer · answered Jan 06 '17 at 23:42

The problem with this is, the overlay is coming on top of the text and hiding the contents below, since it is a white opaque background. Only way to use another <span> and set the z-index to a higher position than the overlay:

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;
}
nav ul li:hover::before {
  width: 100%;
}
nav ul li span {
  position: relative;
  z-index: 99;
}

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

Preview

No need for the z-index, "position: relative" will suffice ;) — Ali Abdelfattah, Jan 06 '17 at 23:59

CSS hover animation hides text

2 Answers2