CODEWITHSUNDEEP
htmlcsscss-animations
ChiefAlu
ChiefAlu

Reputation: 31

CSS hover animation hides text

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

Upvotes: 0

Views: 360

Answers (2)

Marian Rick
Marian Rick

Reputation: 3430

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/

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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

preview

Upvotes: 0

Related Questions