Html 如何仅从 a:before 中删除下划线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8820286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove only underline from a:before?
提问by OptimusCrime
I have a set of styled links using the :beforeto apply an arrow.
我有一组样式链接使用:before来应用箭头。
It looks good in all browser, but when I apply the underline to the link, I don't want to have underline on the :beforepart (the arrow).
它在所有浏览器中看起来都不错，但是当我将下划线应用于链接时，我不想在:before零件（箭头）上添加下划线。
See jsfiddle for example: http://jsfiddle.net/r42e5/1/
参见 jsfiddle 例如：http: //jsfiddle.net/r42e5/1/
Is it possible to remove this? The test-style I sat with #test p a:hover:beforedoes get applied (according to Firebug), but the underline is still there.
这个可以去掉吗？我坐过的测试风格#test p a:hover:before确实得到了应用（根据 Firebug），但下划线仍然存在。
Any way to avoid this?
有什么办法可以避免这种情况？
#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>回答by Phrogz
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:
是的，如果您将内联元素的显示样式从display:inline（默认）更改为display:inline-block：
#test p a:before {
color: #B2B2B2;
content: "? ";
display:inline-block;
}
This is because the CSS specs say:
这是因为CSS 规范说：
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 propagatedto floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
当指定或传播到内联元素时，它会影响该元素生成的所有框，并进一步传播到任何分割内联的流内块级框（参见第 9.2.1.1 节）。[...] 对于所有其他元素，它会传播到任何流入的子元素。请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级后代的内容，例如内联块和内联表。
(Emphasis mine.)
（强调我的。）
Demo: http://jsfiddle.net/r42e5/10/
演示：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.
感谢@Oriol 提供的解决方法促使我检查规范并查看该解决方法是否合法。
回答by LeJared
There is a Bug in IE8-11, so using display:inline-block;alone won't work there.
IE8-11有一个Bug，所以display:inline-block;单独使用是行不通的。
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;
我找到了解决此错误的方法，方法是显式设置text-decoration:underline;:before-content 然后再次覆盖此规则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/
这里的工作示例：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:
更新：由于 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>
回答by Oriol
You can do it adding the following to the :beforeelement:
您可以将以下内容添加到:before元素中：
display: inline-block;
white-space: pre-wrap;
With display: inline-blockthe 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-wrapor white-space: pre.
随着display: inline-block下划线消失。但是接下来的问题是三角形折叠后的空间没有显示。要修复它，您可以使用white-space: pre-wrap或white-space: pre。
回答by Udders
Wrap your links in spans and add the text-decoration to the span on the a:hover like this,
将您的链接包裹在跨度中，并像这样将文本装饰添加到 a:hover 上的跨度中，
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/
我已将您的小提琴更新为我认为您正在尝试做的事情。http://jsfiddle.net/r42e5/4/
回答by Elen
try using instead:
尝试使用：
#test p:before {
color: #B2B2B2;
content: "? ";
text-decoration: none;
}
will that do?
可以吗？
回答by Bipin Chandra Tripathi
use this
用这个
#test p:before {
color: #B2B2B2;
content: "? ";
}
