Bootstrap 5中怎样利用Text-decoration控制下划线

Bootstrap 5 的 text-decoration 工具类仅提供 text-decoration-none、text-decoration-underline 和 text-decoration-line-through 三个语义化类，直接映射原生 CSS 的 text-decoration-line 值，不支持响应式断点、颜色、样式等扩展，需手动处理 hover、继承、a 标签覆盖及复杂装饰效果。

Bootstrap 5 的 text-decoration 工具类如何使用

Bootstrap 5 并未提供独立的 text-decoration 下划线、删除线等效果由一组语义化工具类控制，并非对 CSS 属性进行封装。其核心是 text-decoration-none、text-decoration-underline 和 text-decoration-line-through 这三个类。

它们会直接映射到原生 CSS 的 text-decoration 值，既没有额外修饰，也不包含重置逻辑——因此 hover 状态、颜色继承和响应式切换等细节都需要自行处理。

• text-decoration-none 除其他文本装饰（如以外，已有的下划线/删除线都会被覆盖，父元素继承来的也不例外，但 text-shadow）
• text-decoration-underline 默认采用浏览器的默认颜色（通常是 currentColor），并非 Bootstrap 主题色
• 这些类仅对当前元素生效，不会自动传递给子元素（比如 <a> 里嵌 <span>，span 不会自动带下划线）

为什么 a 标签加了 text-decoration-underline 仍然没有下划线

原因是 Bootstrap 5 默认给 <a> 元素设置了 text-decoration: none（在 _reboot.scss 中），工具类所添加的内容无法改变这一点，因为该规则拥有更高优先级 text-decoration: underline，却被更早声明的 a 专用规则覆盖。

• 最简单的解法：明确添加 text-decoration-underline 并使用 !important（不推荐）
• 更合理的处理：改用 <span class="text-decoration-underline">文本</span>，或者通过自定义样式覆盖 a 的默认行为
• 需要注意：Bootstrap 的 link-underline 类在旧版本中并不存在，到了 v5.3+ 才具备真正的链接下划线支持

text-decoration 响应式场景中的常见问题

响应式断点前缀不适用于 Bootstrap 5 的文本装饰类（比如不存在 text-decoration-underline-md）。“移动端无下划线、桌面端有”这一效果，只能借助内联或自行编写媒体查询实现 style。

• 不要期待 text-decoration-none d-md-inline 这类组合可以恢复下划线——text-decoration-none 会强制清除，d-md-inline 只负责控制 display
• Bootstrap 的相关能力可在采用 Sass 时复用 text-decoration 工具类生成逻辑，并手动加入断点变量
• 纯 CSS 方案示例：

  @media (min-width: 768px) {  .custom-underline-md {    text-decoration: underline;  }}

与原生 text-decoration CSS 属性之间的兼容性差异

Bootstrap 工具类只会设置 text-decoration-line（即 underline / line-through），不会控制 text-decoration-color 或 text-decoration-style。这意味着：

• 下划线颜色始终跟随文字颜色（currentColor），无法一键改为 red 或 var(--primary)
• 工具类无法实现波浪线（wavy）、双线（double）等效果——必须自行编写 CSS
• 若项目采用了 text-decoration-thickness 或 text-underline-offset，但要关注浏览器兼容性：后者直到 Safari 15.4+ 才获得支持，工具类对此完全不作干涉

一旦复杂样式需求增多，“工具类处理一半、自定义 CSS 处理一半”的缝合状态便难以避免——直接写一行反而更合适 style="text-decoration: underline wavy red" ，控制起来更方便。