Search code examples
htmlcsstailwind-cssunderlinetailwind-3

Is it possible to extend an underline of a text in Tailwind CSS

I want to extend the underline of a tittle text that i have to be a little bit longer than the text itself. I have tried to do this with border bottom but cannot achieve the desiger length for it to not expand through the whole screen.Is it possible to do it with underline? `

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

`

I have tried with border bottom but i do not want the whole screen to be underlined just the portion where the wording is and a little bit of extentsion to the side.

Solution 
  • <!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<link rel='stylesheet' href='https://unpkg.com/[email protected]/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>

    use blank character after and before codepen example