При наведении курсора мыши, текст украшение подчеркивание также получает повернута

Question

У меня есть странные проблемы CSS, как можно видеть здесь на этом jsfiddle https://jsfiddle.net/4x17wLoj/

<ul class="menu"> 
<li class="hasChildren menuItem"> 
    <a href="/about-us/our-story.html" class="menuItemLabel"> 
     Our story 
    </a> 
</li> 
</ul> 

.menuItemLabel:before { 
    content:"\e008"; 
    font-family: 'Glyphicons Halflings'; 
    float: right; 
    margin-left: 10px; 
    -webkit-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    transform: rotate(0deg); 
    transition: .05s; 
    font-size: 10px; 
    width: 10px; 
    height: 10px; 
    color: black; 
} 



    .menuItemLabel:hover:before { 
    -webkit-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    transform: rotate(90deg); 
    text-decoration: none; 
    } 

Он работал нормально на всех браузерах. Тем не менее, в IE10, когда я наводил курсор, подчеркивание отображается над текстом (и это нормально). Однако рядом с иконкой есть дополнительная строка. Я думаю, это потому, что я вращаю значок с помощью css3. Это, в свою очередь, также поворачивает текст-подчеркивание.

Любая помощь пожалуйста? Я не хочу, чтобы линия была рядом с иконкой, когда она зависала. Я хочу, чтобы подчеркивание текста подчеркивалось только для текста.

Answer 1

Ну, кросс-браузерная совместимость означает попытку иметь дело с IE в большинстве случаев, и для вашего случая, вот исправление, добавьте следующий код в ваш css, и он зависает без строки внизу;

li a:hover { 
    text-decoration:none; 
} 

Answer 2

Я решил его с помощью переполнения: скрытое, как показано ниже

.menuItemLabel:hover:before { 
    overflow:hidden 
}