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

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在元素(the a)上设置时,你不能在后代(:before)上删除它.

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

你可以这样做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; }