css - IE: remove underline on pseudo-element -
on chrome , firefox, if apply text-decoration:underline on tag, default underline not apply pseudo element. on ie does, , can't remove it. want link underlined, not pseudo element. work if add span inside , put underline on it, want know if can 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 ie */ #underline:hover:before { text-decoration:none !important; /* 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>
it seems ie don't let override text-decoration in pseudoelement if isn't set in it. first let pseudo-element underlined - text-decoration: underline - , afterwards override textdecoration: none.
#underline:hover:before { text-decoration:underline; } #underline:hover:before { text-decoration:none; }
Comments
Post a Comment