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

【问题标题】：How to remove an underline on a pseudo-element?如何删除伪元素上的下划线？
【发布时间】：2015-01-17 01:32:30
【问题描述】：

在 Chrome 和 Firefox 上，如果我在标签上应用 text-decoration:underline，默认情况下下划线不适用于伪元素。但在 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>

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

a:link { text-decoration: none; }


a:visited { text-decoration: none; }


a:hover { text-decoration: none; }


a:active { text-decoration: none; }

【讨论】：

【解决方案2】：

如果没有在其中设置，IE 似乎不允许您覆盖伪元素中的文本装饰。首先让伪元素加下划线 - text-decoration: underline - 然后用 textdecoration: none 覆盖它。

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

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

【讨论】：

向你致敬。这是唯一正确的解决方案。不过，您需要编辑答案。它是 text-decoration: underline （没有下划线）。非常感谢，这真是一个令人头疼的问题。典型的 IE。
这可行，但对我不起作用，因为在缩小 CSS 时，它删除了第一个样式。解决方案是在 a 标签中添加另一个类，然后设置 text-decoration: none 。

【解决方案3】：

您可以将其添加到您的 CSS。这在 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;}

【讨论】：

【解决方案4】：

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

&lt;a href="#" id="underline"&gt;Hover to check underline&lt;/a&gt;

【讨论】：