如何删除只有下划线从一个: 之前？

我有一套使用 :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>

35448 次浏览
小开

Wrap your links in spans and add the text-decoration to the span on the a:hover like this, 

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

I have updated your fiddle to what I think you are trying to do. http://jsfiddle.net/r42e5/4/

小开

try using instead:

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

will that do?

小开

use this 

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


}
小开
最佳答案

Is it possible to remove this?

Yes, if you change the display style of the inline element from display:inline (the default) to display:inline-block:

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

This is because the CSS specs say:

When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). […] For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

(Emphasis mine.)

Demo: http://jsfiddle.net/r42e5/10/

Thanks to @Oriol for providing the workaround that prompted me to check the specs and see that the workaround is legal.

小开

You can do it adding the following to the :before element:

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

With display: inline-block the underline disappears. But then the problem is that the space after the triangle collapses and is not shown. To fix it, you can use white-space: pre-wrap or white-space: pre.

Demo: http://jsfiddle.net/r42e5/9/

小开

There is a Bug in IE8-11, so using display:inline-block; alone won't work there.

I've found a solution for this bug, by explicitly setting text-decoration:underline; for the :before-content and then overwrite this rule again with 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;}

Working example here: http://jsfiddle.net/95C2M/

Update: Since jsfiddle does not work with IE8 anymore, just paste this simple demo-code in a local html file and open it in 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>

提交答案