CSS hover animation скрывает текст

Question

Если я переключаю эффект наведения, фон скрывает текст. Какой atttribute shoud я добавляю, что текст listpoints не находится под фоном «раньше».

Я также размещаю код-ссылку, поэтому вам легко проверить мой код.

Благодаря

<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

Проблема с этим, наложение идет поверх текста и скрывая содержимое ниже, так как это белый непрозрачный фон. Единственный способ использовать другой <span> и установить z-index на более высокую позицию, чем наложения:

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>

Просмотр

Answer 2

Вы могли бы добиться этого эффекта с помощью linear-background и избегайте использования селектора :before, который ems - лучший подход.

Например

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/