如何使用Bootstrap实现文字下划线偏移效果？

方案1（Bootstrap 5.3及以上版本，官方原生支持） #

Bootstrap 5.3已经内置了下划线偏移工具类，不需要额外编写自定义CSS，直接调用对应类即可实现指定像素的偏移效果：

• 支持的偏移尺寸类为text-underline-offset-1到text-underline-offset-4，分别对应1px~4px的下划线偏移量
• 可以和原生<u>标签或text-decoration-underline类搭配使用，下划线宽度和文字宽度完全匹配，不会出现占满整行的问题

示例代码：

<!-- 和u标签搭配 -->
<p><u class="text-underline-offset-3">测试文字</u></p>
<!-- 和text-decoration-underline搭配 -->
<p class="text-decoration-underline text-underline-offset-2">测试文字</p>

方案2（低于5.3的Bootstrap版本，用内置边框类兼容实现） #

如果你的项目用的Bootstrap版本低于5.3，没有内置下划线偏移类，可以用边框+内边距+行内布局的组合实现同等效果：

• 用border-bottom生成下划线，pb-*系列类控制下划线和文字的间距（即偏移量）
• 加d-inline类让容器宽度适配文字长度，避免下划线占满整行

示例代码：

<p class="d-inline border-bottom pb-1">测试文字</p>
<!-- 调整pb的值即可修改偏移：pb-0对应偏移0px，pb-1对应4px，pb-2对应8px -->

内容的提问来源于stack exchange，提问作者Barak David