如何删除伪元素上的下划线? [英] How to remove an underline on a pseudo-element?
问题描述
在Chrome和Firefox上,如果我在标签上应用了text-decoration:underline,则默认情况下,该下划线不适用于伪元素. 但是在IE上确实可以,而且我无法将其删除. 我希望链接带有下划线,但不包含伪元素.
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>
推荐答案
似乎IE不允许您覆盖伪元素中的文本装饰(如果未设置). 首先让伪元素带有下划线-text-decoration:下划线-然后用textdecoration:none覆盖.
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;
}
这篇关于如何删除伪元素上的下划线?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!