是否可以在顺风CSS中扩展文本的下划线?



我想扩展一个小文本的下划线,我必须比文本本身长一点。我尝试过这样做的边界底部,但无法达到设计长度,使其不扩展到整个屏幕。可以用下划线吗?'

<h1 class="text-5xl font-bold  mt-64 text-center  underline decoration-card-blue underline-offset-30  ">
About Us      
</h1>

我已经尝试了边框底部,但我不希望整个屏幕只在措辞的部分下划线,并向一侧延伸一点。

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<link rel='stylesheet' href='https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css'>
</head>
<body>
<h1 class="text-5xl font-bold  mt-64 text-center  underline decoration-card-blue underline-offset-30  ">     About Us           </h1>
</body>
</html>

在前后使用空白字符codepen示例