Question

我很高兴为什么"Should not be underlined"字仍然在下面的代码中加下划线：

<html>
<head>
<style type="text/css">
.badge1-link { text-decoration: none; }
.badge1 { text-decoration: underline; }

.badge2-link {text-decoration: underline;}
.badge2 {text-decoration: none;}

</style> 
</head>
<body>
<a href="#" class="badge1-link"><span class="badge1">Underlined</span> | not underlined</a>
<br/>
<a href="#" class="badge2-link"><span class="badge2"> Should not be underlined</span> | Underlined</a>
</body>
</html>

Answer 1

一旦锚标记被赋予下划线，就无法按照您建议 badge2

的方式进行部分删除

请参阅此链接：Remove stubborn underline from link。接受的答案有一些评论，说明相同。

问题的解决方案是从锚标记中删除下划线，然后像使用 badge1

一样添加部分下划线

Answer 2

显示：inline-block 可以解决问题。它为我工作。改变你的风格如下

.badge2 {display:inline-block;text-decoration: none;}

Answer 3

请使用:link伪类。

Answer 4

锚正在装饰跨度。文本修饰也可以“覆盖”，因此可以覆盖带下划线的文本。所以在这种情况下，css表现得像预期的那样：锚点没有加下划线的跨度。

Answer 5

我遇到了类似的问题：链接带有蓝色下划线，而 {text-decoration: underline;} 什么也没做。我试过 {text-decoration: underline;} ，虽然这确实摆脱了蓝线，但它用黑线代替了它。以我 200 的智商，我决定将下划线涂成白色：{text-decoration: underline white;} 这解决了问题，哈哈。

文字修饰：无;不适用于一个简单的例子

5 个答案: