HTML5 中禁用 标签作通用下划线，应使用 CSS text-decoration 精确控制样式； 仅限拼写错误、专有名词等特殊语义场景，否则损害可访问性与 SEO。
HTML 中没有 标签用于语义化下划线，且它在 HTML5 中已被废弃；直接使用 CSS 的 text-decoration: underline 才是正确、可控、可访问的做法。
为什么不能用
HTML5 明确将 （注意是小写 u，不是 ）降级为“纯表现性标签”，仅保留用于标注拼写错误、专有名词、汉字注音等特殊语义场景，而非通用下划线。浏览器默认样式可能被 UA 样式表覆盖，且屏幕阅读器会忽略其语义，甚至误读为“拼写错误”。
常见错误现象：重要提示 在某些 Chrome 版本中不显示下划线，或与 a 链接样式冲突导致颜色/粗细异常。
- 它不支持控制下划线颜色、粗细、位置（如低于基线）、间距
- 无法单独取消链接自带的下划线而不影响其他文本
- SEO 和无障碍工具可能将其标记为语义滥用
用 text-decoration 精确控制下划线样式
CSS 的 text-decoration 是唯一现代、标准、可扩展的方案。重点用好三个子属性：
-
text-decoration-line: underline—— 必须显式声明，否则无效 -
text-decoration-color: #007bff—— 控制颜色，避免继承父级链接色 -
text-decoration-thickness: 2px或from-font—— 控制粗细（Chrome 89+ / Firefox 70+ 支持） - 加
text-underline-offset: 4px可抬高下划线位置，避免贴底难看
示例：
.highlight {
text-decoration-line: underline;
text-decoration-color: #e74c3c;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
这样比 更轻量、更稳定，且兼容所有现代浏览器。
遇到链接下划线要去掉？别用
很多人想“给普通文字加下划线，但又不想让链接有”，结果乱套 或滥用 !important。其实只需精准重置：
- 移除链接下划线：
a { text-decoration: none; } - 只给特定类加下划线：
.underline { text-decoration: underline; } - 若需 hover 恢复链接下划线：
a:hover { text-decoration: underline; }
注意：不要写 a { text-decoration: underline !important; } 后再试图用 覆盖——这会让样式层叠失控，调试时难以定位。
需要下划线动画或虚线？还是靠 CSS
完全不支持动画、虚线、波浪线等效果。但 CSS 可以：
- 虚线下划线：
text-decoration-style: dotted或dashed - 波浪线（常用于拼写检查）：
text-decoration-style: wavy - 平滑下划线动画：
background-image: linear-gradient(...)+background-size+transition
例如波浪红线下划线（语义明确，视觉有效）：
.misspelled {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: #d32f2f;
}
真正要加下划线时，别找标签，直接写 CSS；真正要表达语义（比如人名、术语、勘误），才考虑 ，并配合 class 和 ARIA 注释。样式和语义必须分开想，混着用迟早踩坑。
