Tailwind CSS - Text Underline Offset

Previous
Quiz
Next

Tailwind CSS Text Underline Offset is a collection of predefined classes that adjust the vertical position of the underline relative to the text to which it is applied, allowing you to control how far below the baseline the underline appears.

Tailwind CSS Text Underline Offset Classes

Below is a list of Tailwind CSS Text Underline Offset classes with properties that adjust the position of the underline relative to its default text alignment.

Class CSS Properties
underline-offset-auto text-underline-offset: auto;
underline-offset-0 text-underline-offset: 0px;
underline-offset-1 text-underline-offset: 1px;
underline-offset-2 text-underline-offset: 2px;
underline-offset-4 text-underline-offset: 4px;
underline-offset-8 text-underline-offset: 8px;

Functionality Of Tailwind CSS Text Underline Offset Classes

  • underline-offset-auto: This class automatically adjusts the underline position based on the font size and text content.
  • underline-offset-0: This class places the underline directly under the text, maintaining its default alignment.
  • underline-offset-1: This class moves the underline slightly below the baseline of the text by 1 pixel.
  • underline-offset-2: This class moves the underline below the baseline of the text by 2 pixels.
  • underline-offset-4: This class moves the underline below the baseline of the text by 4 pixels.
  • underline-offset-8: This class moves the underline below the baseline of the text by 8 pixels.

Tailwind CSS Text Underline Offset Class Examples

Below are examples of Tailwind CSS Text Underline Offset classes that show how you can adjust the position of the underline relative to its default text alignment.

Adjusting Text Underline Offset

This example shows the use of Tailwind CSS Text Underline Offset classes to adjust the positioning of underlines relative to the text they are applied to. It shows various styles by applying different classes to customize the underline placement according to specific requirements.

Example

 
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Text Underline Offset
    </h2> 
    <p class="underline underline-offset-auto mb-4">
        This text has Underline Offset -auto,
    </p> 
    <p class="underline underline-offset-0 mb-4">
        This text has Underline Offset -0.
    </p>
    <p class="underline underline-offset-1 mb-4">
        This text has Underline Offset -1.
    </p>
    <p class="underline underline-offset-2 mb-4">
        This text has Underline Offset -2.
    </p> 
    <p class="underline underline-offset-4 mb-4">
        This text has Underline Offset -4.
    </p> 
    <p class="underline underline-offset-8">
        This text has Underline Offset -8.
    </p> 
</body>

</html>

Text Underline Offset on Hover

This example shows the use of Tailwind CSS Text Underline Offset classes to adjust the position of underlined text. Hover over each paragraph to see how different classes (-auto, -0, -1, -2, -4, -8) modify the underline position relative to the text.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Text Underline Offset
    </h2>
    <p class="text-xl font-semibold mb-2 underline">
         Hover to see Text Underline Offset Classes
    </p> 
    <p class="underline-offset-auto hover:underline mb-4">
        This text has Underline Offset -auto,
    </p> 
    <p class="underline-offset-0 hover:underline mb-4">
        This text has Underline Offset -0.
    </p>
    <p class="underline-offset-1 hover:underline mb-4">
        This text has Underline Offset -1.
    </p>
    <p class="underline-offset-2 hover:underline mb-4">
        This text has Underline Offset -2.
    </p> 
    <p class="underline-offset-4 hover:underline mb-4">
        This text has Underline Offset -4.
    </p> 
    <p class="underline-offset-8 hover:underline">
        This text has Underline Offset -8.
    </p> 
</body>

</html>
Print Page
Previous
Next