最常见原因是a标签被Bootstrap 5默认的高优先级text-decoration:none solid currentColor规则覆盖；其他原因包括父元素text-decoration-none继承、组件级样式干扰、CDN压缩版含!important及工具类仅设line不控颜色样式。
为什么加了 text-decoration-underline 还没下划线
最常见原因是目标元素是 <a></a> 标签——bootstrap 5 默认对所有 <a></a> 设了 text-decoration: underline，但同时在 _reboot.scss 中用更早、更高优先级的规则写了 text-decoration: none solid currentcolor（注意：v5 起已带 solid 和 currentcolor），导致工具类的 text-decoration: underline 被覆盖。
其他典型场景包括：
- 父容器用了
text-decoration-none，子元素即使加text-decoration-underline也无效（text-decoration渲染继承，不是普通继承） - 组件级样式干扰，比如
.alert a、.nav-link、.dropdown-item自带独立text-decoration规则 - 用了压缩版 CDN CSS，其中部分规则带
!important，工具类无法覆盖
text-decoration-underline 和原生 text-decoration: underline 的区别
Bootstrap 的 text-decoration-underline 工具类只设置 text-decoration-line: underline，不带颜色、样式或偏移控制；它等价于写 text-decoration: underline，但不保证浏览器解析完整——因为现代规范要求至少声明 line + color + style 才算有效值。
这意味着：
- 下划线颜色永远是
currentColor（即文字当前颜色），没法一键改成red或var(--primary) - 想改线型（如
dotted）或粗细（text-decoration-thickness），必须脱离工具类，手写 CSS - 若需兼容旧 Safari 或 Firefox 88-，仍得回退到单值写法：
text-decoration: underline solid #0d6efd
怎么让链接真正显示下划线（且可访问）
Bootstrap 5.3+ 引入了 link-underline 类，但它**不会自动作用于 .alert 或 .card-link 内部的 <a></a>**——这些组件的样式优先级更高，必须显式叠加：
- 给链接同时加
link-underline和text-primary（否则下划线颜色可能太淡） - 如果项目用的是 v5.2 或更早，直接写
style="text-decoration: underline"是最快解法 - 全局启用链接下划线？别动
a { text-decoration: underline }，改 Bootstrap 的 CSS 变量：:root { --bs-link-decoration: underline; }（仅 v5.3+ 支持） - 移动端要隐藏下划线？工具类不支持响应式断点，只能手写媒体查询：
@media (max-width: 767.98px) { .custom-underline { text-decoration: none; } }
下划线位置太贴文字？text-underline-offset 不是万能的
text-underline-offset 确实能调距离，但它在 Safari 15.4 之前、Chrome 99 之前、Firefox 89 之前完全不生效——这些旧版本会直接忽略该属性，且不报错。更麻烦的是，它只对 underline 生效，对 line-through 或 overline 无效。
实际调试建议：
- 先确认浏览器是否支持：
text-underline-offset: 2px在 Chrome 100+ 下生效，在 Safari 15.3 下白写 - 避免和
text-decoration-thickness: 3px同时用却不设 offset——厚度增大后，下划线视觉上会“压”进文字里 - 中英文混排时，
text-underline-offset: 0.1em比像素值更稳定；自定义字体务必测多字号
真正难搞的是删除线位置——它由字体 x-height 决定，换字体或改字号就飘，没有通用 offset 可调。
