a 标签去掉下划线，核心就是给 a 标签设置 text-decoration none，这是前端开发最常用的写法，HTML 里面 a 超链接默认自带下划线，是浏览器内置默认样式，写网页的时候很多设计稿不需要下划线，就可以通过 CSS 把这个默认样式清除，不仅普通状态要清除，还要兼顾 hover 点击访问过后等伪类状态，避免鼠标悬停的时候下划线又重新出现，掌握这个写法之后，导航栏文字按钮类超链接都可以统一去除下划线。
学习 a 标签去掉下划线，是因为浏览器对 a 标签有默认 user agent 样式，不同浏览器默认下划线表现基本一致，如果不写 CSS，页面上所有超链接都会显示下划线，和页面设计风格冲突，text-decoration 这个属性专门用来控制文本装饰线，除了下划线，还可以设置上划线删除线，清除的时候统一设置 none，开发的时候可以全局统一设置，也可以单独给某个 a 标签设置类名局部生效。
a 标签去掉下划线操作步骤
第一步 编写基础 HTML 结构，写出 a 标签，比如 a href 链接地址 文字内容。
第二步 编写 CSS 样式，选择器选中 a 标签，添加 text-decoration none。
第三步 补充伪类样式，把 a link a visited a hover a active 全部加上 text-decoration none，防止悬停恢复下划线。
第四步 预览页面，打开网页查看效果，确认普通状态和鼠标悬浮状态都没有下划线。
第五步 按需选择全局或者局部写法，全站导航就全局设置，单个链接就增加 class 单独控制。
核心代码写法
全局写法
a
text-decoration none
a link
text-decoration none
a visited
text-decoration none
a hover
text-decoration none
a active
text-decoration none
局部类名写法
.no underline
text-decoration none
对应 HTML
a href 链接 class no underline 文字
属性信息对照表
| 项目 | 说明 |
| 属性 | text-decoration|
| 取值 | none 清除文本装饰线 |
| 作用对象 | a 超链接标签 |
| 重点 | 伪类状态也要同步清除 |
a 标签去掉下划线最标准方案就是使用 text-decoration none，记得把四种伪类状态都处理，这样不管是正常显示鼠标悬浮还是已经访问过的链接，都不会再出现下划线，如果后续需要恢复下划线，只需要把属性值改成 underline 就可以。
【相关 FAQ】
问题 1 a 标签去掉下划线之后鼠标悬停又出现下划线怎么办
回答 1 a 标签去掉下划线之后悬停重现下划线，一般是没有给 hover 伪类设置样式，把 a hover 同样加上 text-decoration none，就可以解决 a 标签去掉下划线之后悬停恢复下划线的问题。
问题 2 a 标签去掉下划线可以只对某一个链接生效吗
回答 1 a 标签去掉下划线支持局部生效，给这个 a 标签增加自定义 class，在 CSS 里面给这个 class 设置 text-decoration none，就可以单独实现 a 标签去掉下划线，不影响页面其他链接。
问题 3 a 标签去掉下划线除了 text-decoration 还有别的办法吗
回答 1 a 标签去掉下划线主流标准方案就是 text-decoration none，这个是 W3C 推荐写法，其他非常规方案不推荐，做网页开发优先使用标准属性完成 a 标签去掉下划线。
问题 4 a 标签去掉下划线之后还能保留点击跳转功能吗
回答 1 a 标签去掉下划线只是修改文本装饰样式，不会改变链接本身跳转功能，a 标签去掉下划线之后，点击依旧可以正常跳转目标地址。
【免责申明】
本文内容仅作为 a 标签去掉下划线前端代码科普介绍，不同浏览器 CSS 渲染表现会存在细微差别，实际开发请以标准 CSS 规范为准，本文不构成前端项目开发相关决策建议。
