IE:11 hover on before not working

Question

My link has below structure:

a{
  // some css here
}
a:before{
 // contains font icon
}
a:hover{
 text-decoration:underline;
}
a:hover:before{
 text-decoration:none;
}

I need to add text-decoration:underline only on hover of a link, not on the before part. My code is working perfectly fine on chrome but on IE 11, text-decoration:none is not working for a:hover:before.

The ::before pseudo-element is a (pseudo) child of the , in other words, inside it, so all of the features of the itself will still be there, including the underline. (You may notice that hovering works too if you hover only on the ::before.) — Mr Lister, Jun 07 '17 at 11:57
By the way, I made [a fiddle](https://jsfiddle.net/MrLister/8ezdqo3w/), but I don't see any difference between the browsers: the ::before gets underlined in all of them. — Mr Lister, Jun 07 '17 at 12:01
@Mr Lister: Presumably, the pseudo-comments in the given CSS are hiding all the layout information necessary to reproduce the problem. — BoltClock, Jun 08 '17 at 09:56
@BoltClock Ah, you mean that with some clever CSS, it would be possible to replicate the OP's findings? But of course! Here, I made [a fiddle](https://jsfiddle.net/MrLister/ym9fj762/) that behaves like that. — Mr Lister, Jun 08 '17 at 10:18

Mr Lister · Accepted Answer · 2017-06-07T12:21:23.143

0

What you can do is put the main content of the <a> in a span, and underline only the span.

a {
  text-decoration:none;
}
a:before {
 content: '➠ ';
}
a:hover span {                 /* changed */
 text-decoration:underline;
}
a:hover:before {
 text-decoration:none;
}

<a href="#"><span>Click here</span></a>

edited Jun 07 '17 at 12:21

answered Jun 07 '17 at 12:11

Mr Lister

45,515
15
108
150

IE:11 hover on before not working

1 Answers1