用 a { text-decoration: none; } 覆盖浏览器默认下划线；需同时处理 a:hover、a:visited 等伪类，并补充颜色、背景或轮廓等视觉反馈以保障可访问性。

HTML 默认下划线只出现在链接（<a>）上，不是所有文字都有；去掉它，关键不是“删掉什么”，而是“覆盖默认样式”。

怎么用 CSS 去掉 <a> 标签的下划线

浏览器对 <a> 有内置样式：text-decoration: underline。要让它消失，必须显式重写这个属性。

• 最常用、最安全的方式是：

   a { text-decoration: none; }

• 如果只想去掉某类链接（比如导航栏），加 class 更稳妥：

   .nav-link { text-decoration: none; }

• 别用 text-decoration: none 直接写在行内 style 里——维护困难，且容易被其他样式覆盖
• 注意：IE8 及更早版本不支持 text-decoration: none 在非 <a> 元素上生效，但现代项目基本不用考虑

为什么有时候加了 text-decoration: none 还有下划线

常见原因不是代码写错，而是样式没生效或被覆盖。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• CSS 优先级不够：检查是否被更具体的规则（比如 nav a:hover）或 !important 覆盖
• 伪类没处理全：只写了 a { text-decoration: none; }，但用户鼠标悬停时 a:hover 又加回了下划线，得一并写：

   a, a:hover, a:visited, a:focus { text-decoration: none; }

• 用了 border-bottom 模拟下划线：这种不是 text-decoration，得查 border-bottom 相关样式
• 父元素设置了 text-decoration: underline：该属性会继承并“透传”到子链接，需在 <a> 上用 text-decoration: none 强制中断

去掉下划线后，怎么让链接还能被识别为可点击

纯视觉去下划线后，用户可能分不清哪段文字是链接，尤其对无障碍访问不友好。

立即学习“前端免费学习笔记（深入）”；

• 务必补上其他视觉提示：比如改颜色（color: #0066cc）、加 hover 背景色、或加图标
• 别依赖颜色 alone：色觉障碍用户可能无法分辨，hover 或 focus 时加 outline 或 box-shadow 更可靠
• 如果是为了“让链接看起来像普通文字”，建议用 role="link" + JS 事件模拟，而不是隐藏语义 —— 屏幕阅读器仍需知道这是链接

真正麻烦的从来不是加一行 text-decoration: none，而是忘记它只管“装饰”，不管“语义”和“交互反馈”。下划线没了，用户还得知道“这儿能点”。