How to remove an underline on a pseudo-element?

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>

Surbeck

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;
}

Paderna

Kudos to you. This is the only solution that is correct. You need to edit your answer though. It's text-decoration: underline (not underlined). Thanks a lot, this was a complete headache. Typical IE. – Beryllium

This works but wasn't working for me because when minifying the CSS, it removed the first style. The solution was to add another class to the a tag and then set text-decoration: none on that. – Payson

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>

Rummage

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;}

Repletion

Answer 4

a:link { text-decoration: none; }


a:visited { text-decoration: none; }


a:hover { text-decoration: none; }


a:active { text-decoration: none; }

Switch