如何在伪元素上移除下划线？

Question

在 Chrome 和 Firefox 上，如果我在一个标签上应用了 text-decoration:underline 样式，那么默认情况下下划线不会应用到伪元素上。 但是在 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>

- DocFrag

Answer 1

似乎IE不允许您在未设置伪元素的情况下覆盖文本修饰。

首先让伪元素带有下划线- text-decoration: underline - ，然后使用textdecoration: none来覆盖它。

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

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

- Ina

---

谢谢夸奖。这是唯一正确的解决方案。不过你需要修改你的答案，正确的写法是text-decoration: underline（而不是underlined）。非常感谢，这真是让我头痛了好久。典型的IE浏览器问题。 - Robert Henderson

这个代码是有效的，但对我来说不起作用，因为在压缩CSS时，它删除了第一个样式。解决方案是向a标签添加另一个类，然后在该类上设置text-decoration: none。 - GMon

Answer 2

由于在IE中无法覆盖text-decoration: underline;，您可以使用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>

- Hidden Hobbes

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

- bernte

Answer 4

a:link { text-decoration: none; }


a:visited { text-decoration: none; }


a:hover { text-decoration: none; }


a:active { text-decoration: none; }

- Leo