停止链接：在内容被应用于链接的规则加下划线之前
我有一个悬停时带有下划线的文本链接。我使用以下代码在链接的开头添加 > 符号：
.box.blueb a { color: #0098aa; }
.box.blueb a:hover { text-decoration: underline; }
.box.blueb a:before { content: "> "; }
.box.blueb a:before:hover { text-decoration: none; }
但是我不希望当链接悬停时 > 符号带有下划线。我该如何实现这一目标？
I have a text link that is underlined when hovered. I'm adding at the beginning of the link a > symbol using the following code:
.box.blueb a { color: #0098aa; }
.box.blueb a:hover { text-decoration: underline; }
.box.blueb a:before { content: "> "; }
.box.blueb a:before:hover { text-decoration: none; }
But what I don't want the > symbol underlined when the link is hovered. How do I achieve this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
http://jsfiddle.net/thirtydot/LmvgM/1/
您需要包装一个
span围绕a内的文本：然后将 CSS 更改为：
.box.blueb a:before:hover {文本装饰：无； }不起作用，因为当您在元素（a）上设置text-decoration: underline时，您无法在后代上删除它 （：之前）。http://jsfiddle.net/thirtydot/LmvgM/1/
You need to wrap a
spanaround the text inside thea:And then change your CSS to this:
.box.blueb a:before:hover { text-decoration: none; }doesn't work because when you settext-decoration: underlineon an element (thea), you can't then remove it on a descendant (:before).http://jsfiddle.net/LmvgM/8/
仅用css即可实现，无需额外html 标记通过设置position:relative 到链接，并分别设置position:absolute 到:before 内容。
使用这个例子......
CSS将如下所示：
http://jsfiddle.net/LmvgM/8/
It can be achieved with css only, without additional html markup by setting position:relative to the link, and respectively position:absolute to :before content.
Using this example...
... the css will look like this:
您只需将
display: inline-block添加到:before元素即可做到这一点：Demo: http://jsfiddle.net/CaNyx/
编辑：
问题在于
display: inline-block空格未显示，但您可以使用以下命令修复它white-space: pre或white-space: pre-wrap演示：http://jsfiddle.net/CaNyx/1/
You can do it css only adding
display: inline-blockto the:beforeelement:Demo: http://jsfiddle.net/CaNyx/
Edit:
The problem is that with
display: inline-blockthe space is not shown, but you can fix it withwhite-space: preorwhite-space: pre-wrapDemo: http://jsfiddle.net/CaNyx/1/
如果您想要纯 CSS 解决方案，请尝试此方法。
为了让它在 IE 中工作，您需要在为伪元素关闭它之前显式地打开它：
因此在您的示例中，您需要将其写入：
Try this if you want a CSS only solution.
For it to work in IE, you need to explicitly turn it on before you turn it off for the pseudo elements:
So in your example you would need it to be written:
这个问题也被问到 :hover:before text-decoration none has noeffects? 并回答 https://stackoverflow.com/a/13376725/261747 工作于我也是用IE。
This question was also asked at :hover:before text-decoration none has no effects? and answer https://stackoverflow.com/a/13376725/261747 worked for me in IE too.
我知道这并不能回答如何阻止锚点的内容前带有下划线。
但当我需要这种行为时，我发现最好的解决方法是不使用
a:before。HTML：
CSS：
因此，为包裹锚点的元素指定
:before伪类，而不是锚点本身似乎是目前最好的解决方案。如果您更喜欢使用列表，另一个例子是：
HTML：
CSS：
I know this doesn't answer how to stop an anchor's before content from being underlined.
But the best work-around I find when I need this behavior is not using
a:before.HTML:
CSS:
So, specifying
:beforepseudo-class for the element that wraps the anchor, instead of the anchor itself seems like the best solution at the moment.Another example if you prefer using lists:
HTML:
CSS: