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/

您需要在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），you can't then remove it上设置:before时。< / p>

Answer 2

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

只有css才能实现，没有额外的html标记，只需设置位置：相对于链接，并分别位于：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;
}

Answer 3

您可以执行此操作，仅将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 has no effects?被问到，而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: "";           }

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

6 个答案: