在网页排版中，下划线常常出现在超链接或者某些重点文本上。CSS提供了非常直接的方式来控制下划线显示，最核心的属性就是text-decoration。只要理解它的取值规则，去掉下划线其实并不复杂。
一、超链接默认下划线的移除
浏览器出于可访问性考虑，会给<a>标签的未访问和已访问状态都加上下划线。这是用户代理样式表里的默认规则，并不是开发者手动写的。如果我们不希望链接带下划线，就要在自己的样式表里覆盖这条默认规则。
最常用也最标准的写法，是把text-decoration的值设为none。这样浏览器就不会再绘制那条线。下面是一段基础示例，用于去掉页面中所有超链接的下划线：
/* 去掉所有a标签的下划线 */
a {
text-decoration: none;
}
/* 如果希望鼠标悬停时也不出现下划线 */
a:hover {
text-decoration: none;
}
这种写法的优点是简单、兼容性好，从早期IE到现代浏览器都支持。缺点是如果项目里某些链接又想保留下划线，就需要用更具体的选择器重新加回来，例如给某类链接单独设置underline。
从权重角度说，a选择器的优先级较低，如果其他地方用了类选择器如.nav-link并设置了下划线，那么a的none可能被覆盖。因此实际项目中常配合类或ID来精确控制，而不是全局一把梭。
二、非链接文本下划线的处理
有些下划线并不是超链接带来的，而是开发者主动用CSS加在普通文本上的，比如为了强调某个词。此时去掉的方式和链接完全一致，也是操作text-decoration。
例如下面这段HTML和CSS，我们给span加了一条下划线，然后又通过另一个规则去掉它：
<p>这是一段包含<span class="underline-text">带下划线</span>的文字。</p>
/* 先加上下划线 */
.underline-text {
text-decoration: underline;
}
/* 后续去掉下划线 */
.underline-text {
text-decoration: none;
}
这里要注意，CSS是同属性后写覆盖前写。如果两条规则优先级一样，后面出现的none会生效。若用了underline又没去掉，可以检查是否有其他样式表在更后面重新定义了text-decoration。
另外，text-decoration其实是简写属性，它包含text-decoration-line、text-decoration-color、text-decoration-style等子属性。现代浏览器支持单独写text-decoration-line: none，效果和简写一致，但在老项目里用简写none更稳妥。
三、用border-bottom模拟的下划线怎么办
很多UI效果里，下划线其实不是真正的text-decoration，而是用border-bottom画出来的一条线。这种做法的好处是可以控制线的颜色、粗细、距离文本的间距，比原生下划线更灵活。
如果你的元素下划线去不掉，先打开开发者工具看看是text-decoration还是border-bottom导致的。若是后者，就要把border设为none。示例如下：
/* 错误：用border模拟下划线 */
.link-like {
border-bottom: 1px solid #333;
}
/* 去掉这种下划线 */
.link-like {
border-bottom: none;
}
这种border模拟方式在导航菜单、表格底部线里很常见。它的缺点是会占据布局空间，而text-decoration的下划线不占盒子高度。因此两种方案在排版影响上不同，去掉时要对症下药。
还有一种情况是text-underline-offset等属性被设置，让下划线看起来离文字很远，容易被误认成border。此时不需要改border，只要把text-decoration相关值复位即可。
四、全局与局部控制的建议
在真实项目中，通常不会所有链接都无下划线，而是根据位置区分。例如正文里的链接保留下划线，顶部导航去掉。这时可以用上下文选择器分别处理。
下面给出一个结构清晰的例子，展示如何局部控制：
/* 全局链接默认无下划线 */
a {
text-decoration: none;
}
/* 文章正文内的链接保留下划线，便于阅读 */
.article-content a {
text-decoration: underline;
color: #0645ad;
}
/* 导航内链接始终无下划线 */
.site-nav a {
text-decoration: none;
}
这样做既满足了设计统一，又兼顾了可读性和可用性。需要提醒的是，完全去掉下划线且不变色时，用户可能分不清哪是链接，所以无下划线链接常配合颜色变化或悬停反馈。
最后总结，CSS去掉下划线的关键就是找准下划线来源：来自text-decoration就设none，来自border就设border:none。配合选择器的优先级规则，就能精准掌控每一个元素的下划线状态。
CSStext-decorationremove_underline修改时间：2026-08-03 23:36:26