CSS-Hover-Animation versteckt Text

Question

Wenn ich den Hover-Effekt umschalte, verbirgt der Hintergrund den Text. Welches Attribut sollte ich hinzufügen, dass der Text der Listenpunkte nicht unter dem ": before" Hintergrund liegt.

Ich poste auch einen Code-Link, so dass es einfach ist, meinen Code zu überprüfen.

Dank

<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

Answer 1

Das Problem dabei ist, wird das Overlay auf dem Text kommen und den Inhalt unter versteckt, da es sich um eine weiße, undurchsichtige Hintergrund ist. Nur so eine andere <span> und stellen Sie die z-index in eine höhere Position als die Überlagerung zu verwenden:

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>

Vorschau

Answer 2

Sie diesen Effekt erzielen könnte ein mit linear-background und vermeiden Sie die Verwendung der :before Selector, die se ems, um ein besserer Ansatz zu sein.

Zum Beispiel

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

Wie in diesem Stapel von beardheadcode vorgeschlagen: Fill background color left to right CSS

Es obwohl eine Demo ist: http://jsfiddle.net/75Umu/3/