在网页开发中，a标签默认会带有下划线样式，很多场景下我们需要去掉这个下划线让页面视觉效果更符合设计需求。通过CSS的text-decoration属性可以轻松实现这个效果，同时还可以结合其他样式属性让a标签的交互效果更完善。
核心实现方法
要去掉a标签的下划线，最直接的方式是设置text-decoration属性为none。text-decoration是CSS中控制文本装饰线的属性，默认值对于a标签来说是underline，也就是下划线，设置为none就可以消除下划线。
最基础的全局去掉所有a标签下划线的代码如下：
/* 选择所有a标签，设置文本装饰为无 */
a {
text-decoration: none;
}
不同场景的针对性设置
只去掉未访问链接的下划线
如果只需要对未访问过的a标签去掉下划线，可以使用:link伪类选择器：
/* 仅针对未访问的链接去掉下划线 */
a:link {
text-decoration: none;
}
去掉已访问链接的下划线
针对已经点击过的链接，使用:visited伪类选择器：
/* 仅针对已访问的链接去掉下划线 */
a:visited {
text-decoration: none;
}
鼠标悬停时保留交互提示
很多场景下我们去掉默认下划线后，会在鼠标悬停到a标签上时重新显示下划线，给用户明确的交互反馈，代码如下：
/* 默认去掉所有a标签的下划线 */
a {
text-decoration: none;
}
/* 鼠标悬停时显示下划线 */
a:hover {
text-decoration: underline;
}
/* 鼠标按下时也可以设置对应样式 */
a:active {
text-decoration: underline;
}
内联样式实现方式
如果不想写单独的CSS样式表，也可以直接在a标签上使用内联样式实现去掉下划线的效果：
<a href="https://ipipp.com" style="text-decoration: none;">这是一个没有下划线的链接</a>
注意事项
- 如果设置了去掉下划线的样式但没有生效，需要检查是否有其他更高优先级的CSS规则覆盖了当前设置，可以通过浏览器开发者工具查看样式优先级。
- 去掉下划线后，建议通过修改文字颜色、添加hover效果等方式，让用户能明确区分可点击的链接和普通文本，避免影响用户体验。
- text-decoration属性除了控制下划线，还可以设置上划线、删除线等，设置为none会同时清除所有文本装饰线。
完整示例代码
下面是一个完整的HTML示例，展示如何去掉a标签下划线并添加悬停效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>去掉a标签下划线示例</title>
<style>
/* 去掉所有a标签的默认下划线 */
a {
text-decoration: none;
color: #333;
}
/* 鼠标悬停时显示下划线并改变颜色 */
a:hover {
text-decoration: underline;
color: #1890ff;
}
</style>
</head>
<body>
<p>这是一个普通段落，里面的<a href="https://ipipp.com">链接没有下划线</a>，鼠标放上去会显示下划线。</p>
<p>另一个<a href="https://ipipp.com/test">测试链接</a>也遵循同样的样式规则。</p>
</body>
</html>
CSSHTMLa标签text_decoration修改时间：2026-07-17 13:48:10