bootstrap 5+仅提供.text-decoration-none、.text-decoration-underline、.text-decoration-line-through三类，不支持overline、blink或组合修饰；需自定义css实现多修饰、颜色/粗细控制及可访问性补救。
Bootstrap 中控制文本装饰的类名有哪些
Bootstrap 5（及后续版本）默认只提供 .text-decoration-none、.text-decoration-underline、.text-decoration-line-through 这三个基础类，对应 CSS 的 text-decoration 属性值 none、underline、line-through。它不支持 overline 或 blink（已废弃），也不提供组合修饰（如同时下划线+删除线）的预设类。
常见误用是试图写 .text-decoration-underline .text-decoration-line-through 并期望叠加生效——实际只会以最后声明的为准（CSS 层叠规则），必须手动写自定义类或内联样式才能实现多修饰。
为什么 Bootstrap 不提供 .text-decoration-overline 或颜色/粗细控制
这是设计取舍：Bootstrap 定位为“实用优先”的 UI 框架，不是 CSS 装饰库。过度拆分 text-decoration 子属性（如 text-decoration-color、text-decoration-thickness、text-underline-offset）会显著增加类名体积和维护成本，且这些属性在旧版浏览器（如 IE、旧 Edge）兼容性差。
如果你真需要红色波浪下划线或 2px 粗下划线：
- 用自定义 CSS，例如：
.text-red-underline { text-decoration: underline red; text-decoration-thickness: 2px; } - 避免用
!important覆盖 Bootstrap 原生类，优先通过更具体的 CSS 选择器或提升加载顺序来覆盖 - 注意
text-underline-offset在 Safari 15.4+ 才稳定支持，移动端需测试
用 .text-decoration-none 移除链接下划线时的典型问题
直接给 <a></a> 加 .text-decoration-none 往往不够——因为 Bootstrap 的 a:hover 伪类仍会触发下划线（尤其在 .nav-link 或 .btn 中）。真正生效要同时处理伪状态：
- 对普通链接：加
.text-decoration-none后，建议额外加.link-underline-opacity-0（Bootstrap 5.3+）或写:hover { text-decoration: none !important; } - 对导航项：
.nav-link.text-decoration-none无效？检查是否被.nav-link:hover覆盖，此时应改用.nav-link.link-body-emphasis+ 自定义 hover 规则 - 移除下划线后，可访问性会下降——务必确保有其他视觉反馈（如背景色变化、border 或 icon），否则屏幕阅读器用户和键盘焦点用户难以识别可点击区域
文本装饰类的性能与渲染影响
纯 CSS 类如 .text-decoration-underline 几乎无性能开销，但要注意两点隐性成本：
- 如果页面大量使用带
text-underline-offset或text-decoration-thickness的自定义类，某些低端 Android WebView（如 Android 10 以下）可能触发重绘抖动，表现为滚动时下划线闪烁 - Bootstrap 的装饰类依赖
text-decoration，而该属性无法被 CSS 动画过渡（transition对它无效），想做“渐显下划线”效果必须用background-image: linear-gradient()模拟 - 服务端渲染（SSR）场景下，若装饰类用于动态内容，确保 class 名拼写完全匹配（比如
.text-decoration-none不是.text-decorate-none），否则 SSR 和 CSR 渲染结果不一致，可能引发 hydration mismatch 报错
最常被忽略的是可访问性补救措施：去掉下划线不等于去掉交互提示，视觉线索缺失必须用其他方式补偿，否则 WCAG 2.1 SC 1.4.1 就不达标。
