如何在Tailwind CSS中实现超出文本长度的自定义下划线？

问题解答 #

无法仅通过underline属性实现下划线比文本稍长的效果——原生的text-decoration: underline会严格跟随文本内容的宽度，没有直接属性可以调整下划线的左右延伸长度。不过可以通过以下两种Tailwind CSS方案实现需求：

方法1：内联块元素+边框（简单易维护） #

将标题文本包裹在<span>中，利用inline-block让边框仅作用于文本区域，再通过左右内边距控制下划线的延伸长度：

<h1 class="text-5xl font-bold mt-64 text-center">
  <span class="inline-block border-b-2 border-card-blue pb-2 px-4">About Us</span>
</h1>

• px-4：控制下划线左右延伸的距离，可根据需求调整数值
• border-b-2：设置下划线的厚度
• border-card-blue：指定下划线颜色
• pb-2：调整文本与下划线的垂直间距

方法2：相对定位+绝对伪元素（精准控制长度） #

如果需要更精确的长度控制，比如固定延伸像素值，可以用相对定位的父容器配合绝对定位的伪元素：

<h1 class="text-5xl font-bold mt-64 text-center relative">
  About Us
  <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-[calc(100%+32px)] h-1 bg-card-blue"></span>
</h1>

• relative：让标题成为伪元素的定位参考
• absolute bottom-0 left-1/2 transform -translate-x-1/2：确保下划线水平居中对齐标题
• w-[calc(100%+32px)]：设置下划线宽度为文本宽度+32px（左右各延伸16px），可修改数值调整延伸长度
• h-1：设置下划线厚度
• bg-card-blue：指定下划线颜色

补充说明 #

原生的underline相关属性（如text-decoration-width、text-underline-offset）只能调整下划线的厚度和垂直间距，无法改变其左右延伸范围，因此必须借助额外元素或伪元素实现你的需求。

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