Question

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

如果我在里面添加一个span并在其上加下划线，它会起作用，但我想知道它是否可以在没有额外标记的情况下制作。

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。

＆＃13;

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

＆＃13;

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; }上覆盖。这只适用于纯色背景。

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

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

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

3 个答案: