Question

我有一组样式链接使用:before来应用箭头。

它在所有浏览器中看起来都不错，但是当我将下划线应用于链接时，我不希望在:before部分（箭头）上加下划线。

例如，请参阅jsfiddle：http://jsfiddle.net/r42e5/1/

可以删除吗？我和#test p a:hover:before坐在一起的测试风格确实得到了应用（根据Firebug），但下划线仍然存在。

有什么方法可以避免这种情况吗？

#test {
  color: #B2B2B2;
}

#test p a {
  color: #B2B2B2;
  text-decoration: none;
}

#test p a:hover {
  text-decoration: underline;
}

#test p a:before {
  color: #B2B2B2;
  content: "► ";
  text-decoration: none;
}

#test p a:hover:before {
  text-decoration: none;
}

<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>

Answer 1

是否可以删除它？

是的，如果您将内联元素的显示样式从display:inline（默认值）更改为display:inline-block：

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

这是因为the CSS specs say：

当在内联元素上指定或传播到内联元素时，它会影响该元素生成的所有框，并进一步传播到拆分内联的任何流内块级框（参见第9.2.1.1节）。 [...]对于所有其他元素，它会传播给任何流入的孩子。请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会到原始内联级后代的内容，例如内联块和内联表。

（强调我的。）

演示：http://jsfiddle.net/r42e5/10/

_{感谢@Oriol提供的解决方法，提示我查看规范并查看解决方法是否合法。}

Answer 2

IE8-11中存在错误，因此单独使用display:inline-block;将不起作用。

我找到了针对此错误的解决方案，明确为：before-content设置text-decoration:underline;，然后使用text-decoration:none;再次覆盖此规则

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}

这里的工作示例： http://jsfiddle.net/95C2M/

更新：由于jsfiddle不再适用于IE8，只需将这个简单的演示代码粘贴到本地html文件中并在IE8中打开它：

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        a {text-decoration:none;}
        a:hover {text-decoration:underline;}
        a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
        a:before,
        a:hover:before {text-decoration:none;}
    </style>
</head>
<body>
    <a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>

Answer 3

您可以将以下内容添加到:before元素：

display: inline-block;
white-space: pre-wrap;

display: inline-block下划线消失。但问题是三角形后的空间坍塌而未显示。要解决此问题，您可以使用white-space: pre-wrap或white-space: pre。

演示：http://jsfiddle.net/r42e5/9/

Answer 4

以跨度方式包裹您的链接，并将文本修饰添加到a上的范围：悬停像这样，

a:hover span {
   text-decoration:underline;
}

我已将你的小提琴更新到我认为你想要做的事情。 http://jsfiddle.net/r42e5/4/

Answer 5

尝试使用：

#test p:before {
    color: #B2B2B2;
    content: "► ";
    text-decoration: none;
}

那会吗？

Answer 6

使用此

#test  p:before {
    color: #B2B2B2;
    content: "► ";

}

如何只删除a：下划线？

6 个答案:

演示：http://jsfiddle.net/r42e5/10/