停止链接：在内容被应用于链接的规则下划线之前

Posted 2023-02-23

【中文标题】停止链接：在内容被应用于链接的规则下划线之前

【英文标题】：Stop link's :before content from being underlined by rule applied to the link

【发布时间】：2012-01-22 02:08:04

【问题描述】：

我有一个文本链接，悬停时带有下划线。我使用以下代码在链接的开头添加> 符号：

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

但是当链接悬停时，我不希望> 符号下划线。我如何做到这一点？

【参考方案1】：

http://jsfiddle.net/thirtydot/LmvgM/1/

您需要将span 包裹在a 内的文本周围：

<div class="box blueb">
    <a href="#"><span>Hello</span></a>
</div>

然后将您的 CSS 更改为：

.box.blueb a  color: #0098aa; text-decoration: none; 
.box.blueb a:hover > span  text-decoration: underline; 
.box.blueb a:before  content: "> "; 

.box.blueb a:before:hover text-decoration: none; 不起作用，因为当您在元素（a）上设置 text-decoration: underline 时，在后代（:before）上设置 you can't then remove it。

【讨论】：

谢谢你，但我不认为添加额外的标记会与我正在为其构建它的人一起飞行。

我不明白你怎么能做到这一点。我能想到的唯一其他选择是对> 使用background-image 而不是文本。

不需要添加额外的标记，如另一个答案所示。仅使用 CSS 执行此操作更优雅。

@kontur：这里的所有其他答案都有缺点，例如：> 字符的宽度可以在字体/大小之间更改（或者如果您更改字符），在旧版本中不起作用浏览器，很复杂。用 CSS 做这件事并不优雅，只是不够健壮。我们这里不是在做 CSS Zen Garden，只是添加一些 spans！诚然，我现在（甚至最近）还没有真正尝试过再次解决这个问题，因为我知道可能会有一些优雅的纯 CSS 解决方案。不过我在这个线程中没有看到它。

这个可能不错：***.com/a/21902566/405015。不知道是不是你说的那个。

【参考方案2】：

http://jsfiddle.net/LmvgM/8/

只用css就可以实现，不需要额外的html标记，通过设置position:relative to the link，分别设置position:absolute to :before content。

使用这个例子...

<div class="box blueb">
    <a href="#">Hello</a>
</div>

...css 将如下所示：

.box.blueb a  
    color: #0098aa; 
    position: relative;
    margin-left: 5px;
    padding-left: 10px;
    text-decoration: none;


.box.blueb a:before  
    content: "> "; 
    position: absolute;
    top: 0;
    left: 0;


.box.blueb a:hover 
    text-decoration: underline;

【讨论】：

不幸的是，它在 IE11 中不起作用。 Chrome 和 Firefox 都可以。

这是一个在 IE8-11 中也可以使用的正确答案：***.com/a/21902566/1607968

【参考方案3】：

您可以只在 :before 元素中添加 display: inline-block 来做到这一点：

.box.blueb a  color: #0098aa; 
.box.blueb a:hover  text-decoration: underline; 
.box.blueb a:before  content: "> "; display:inline-block; 

演示：http://jsfiddle.net/CaNyx/

---

编辑：

问题是display: inline-block 不显示空格，但您可以使用white-space: pre 或white-space: pre-wrap 修复它

演示：http://jsfiddle.net/CaNyx/1/

【讨论】：

很遗憾，IE11 拒绝了。

@JorritSchippers 真的吗？我开始认为新版本的 IE 很糟糕...更少，但似乎 IE 将永远是 IE 并且很糟糕。

@JorritSchippers 我已经对其进行了测试，它似乎不适用于任何 IE 版本。真可惜，这种行为是在 CSS2.1 中定义的，根据微软的说法，IE8 应该完全支持 CSS2.1。

微软终于修复了它。在 Edge 上按预期工作。

【参考方案4】：

如果你想要一个纯 CSS 的解决方案，试试这个。 要让它在 IE 中工作，您需要在为伪元素关闭它之前显式打开它：

a text-decoration:none;
a:hover text-decoration:underline;
a:before  text-decoration:underline;
a:before,
a:hover:before text-decoration:none;

因此，在您的示例中，您需要编写它：

.box.blueb a  text-decoration:none; 
.box.blueb a:hover  text-decoration: underline; 
.box.blueb a:before  text-decoration: underline; 
.box.blueb a:before,
.box.blueb a:before:hover  text-decoration: none; 

【讨论】：

我找到的最佳解决方案！

这个解决方案真的很棒！

【参考方案5】：

:hover:before text-decoration none has no effects? 也有人问过这个问题，https://***.com/a/13376725/261747 在 IE 中也为我工作。

【参考方案6】：

我知道这并没有回答如何在内容被下划线之前阻止锚点。 但是当我需要这种行为时，我发现的最佳解决方法是不使用 a:before。

HTML:

<nav class="breadcrumb">
    <span><a href="#">Test 1</a></span>
    <span><a href="#">Test 2</a></span>
    <span><a href="#">Test 3</a></span>
</nav>

CSS：

nav.breadcrumb > span:before              content: "> "; 
nav.breadcrumb > span:first-child:before  content: "";   

因此，为包裹锚点的元素指定 :before 伪类，而不是锚点本身似乎是目前最好的解决方案。

---

另一个例子，如果你喜欢使用列表：

HTML:

<ul class="breadcrumb">
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
</ul>

CSS：

ul.breadcrumb                          margin: 0; padding: 0; 
ul.breadcrumb > li                     display: inline;       
ul.breadcrumb > li:before              content: "> ";         
ul.breadcrumb > li:first-child:before  content: "";