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

Question

在Chrome和Firefox上,如果我在标记上应用文本修饰:下划线,默认情况下,下划线不适用于伪元素.但在IE上确实如此,我无法删除它.我希望链接加下划线,但不是伪元素.

它可以工作,如果我在里面添加一个跨度并在其上加下划线,但我想知道它是否可以在没有额外标记的情况下制作.

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

似乎IE不允许你覆盖伪元素中的文本修饰,如果它没有在其中设置.首先让伪元素加下划线 - 文本修饰:下划线 - 然后用textdecoration:none覆盖它.

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

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

Answer 2

由于text-decoration: underline;无法在 IE 中覆盖，您可以使用border-bottom: 1px solid green;它。:before然后可以通过将其边框颜色设置为背景颜色（在本例中为白色）来覆盖它。但这仅适用于纯色背景。

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>