如何删除伪元素上的下划线？

Question

On Chrome and Firefox, if I apply a text-decoration:underline on a tag, by default the underline does not apply to the pseudo element. But on IE it does, and I can't remove it. I want the link to be underlined, but not the pseudo element.

It work if I add a span inside and put the underline on it, but I want to know if it can be made without additional markup.

 a{ padding-left: 9px; position:relative; display:inline-block; } a:before{ content:'\\203A\\00a0'; position:absolute; top:0; left:0; display: inline-block; } #underline{ text-decoration: none; } #underline:hover{ text-decoration:underline; } /* special for IE */ #underline:hover:before { text-decoration:none !important; /* does nothing ! */ } #color{ color:green; } #color:hover{ color:red; } #color:hover:before{ color:green; /* work ! */ } #span{ text-decoration: none; } #span:hover span{ text-decoration: underline; }

 <a href="#" id="underline">underline</a> <br> <a href="#" id="color">color</a> <br> <a href="#" id="span"><span>with span</span></a>

Answer 1

It seems that IE don't let you override the text-decoration in the pseudoelement if it isn't set in it. First let the pseudo-element be underlined - text-decoration: underline - and afterwards override this with textdecoration: none.

 #underline:hover:before { text-decoration:underline; } #underline:hover:before { text-decoration:none; } 

Answer 2

As text-decoration: underline; can't be overridden in IE you could use border-bottom: 1px solid green; instead. This can then be overwritten on the :before by setting its border colour to the background colour (in this case white). This will only work on solid colour backgrounds though.

 a { color: green; display: inline-block; padding-left: 9px; position: relative; text-decoration: none; } a:before { content: '\\203A\\00a0'; display: inline-block; left: 0; position: absolute; top: 0; } a:hover { border-bottom: 1px solid green; } a:hover:before { border-bottom: 1px solid white; } 

 <a href="#" id="underline">Hover to check underline</a> 

Answer 3

you can add this to your css. this helped me in the IE

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before,a:after { text-decoration:underline;}
a:before,a:after,
a:hover:before,a:hover:after {text-decoration:none;}

Answer 4

a:link { text-decoration: none; }


a:visited { text-decoration: none; }


a:hover { text-decoration: none; }


a:active { text-decoration: none; }