When mouse hover, the text decoration underline also gets rotated

Question

I have a weird css issue as can be seen here on this 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;
   }

It worked ok on all browsers. However, on IE10, when I mouseover the underline is shown over the text (And that is ok). However, there is an extra line beside the icon. I think it is because I am rotating the icon using css3. This in turn also rotates the text-underline.

Any help please? I do not want the line beside the icon when hovered. I do want to keep the text decoration underline for the text only.

Answer 1

Well, cross-browser compatibility means trying to deal with IE most of the times, and for your case, here's the fix, add the following code to your css, and have it hovered without the line beneath;

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