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

Question

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

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

但是当链接悬停时，我不希望>符号下划线。我如何实现这一目标？

Answer 1

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

您需要将 a 包裹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; }不起作用，因为当您text-decoration: underline在一个元素 ( a) 上设置时，您不能在后代 ( :before) 上删除它。

Answer 2

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

它可以仅使用 css 来实现，无需额外的 html 标记，方法是设置 position:relative 到链接，分别将 position:absolute 设置为 :before 内容。

使用这个例子...

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

Answer 3

您可以仅将 css 添加display: inline-block到:before元素中：

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

Answer 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; }

Answer 5

这个问题也在:hover:before text-decoration none 没有效果？并回答https://stackoverflow.com/a/13376725/261747在 IE 中也为我工作。

Answer 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: "";           }