'Creating a horizontal rule (HR) divider that contains text with Tailwind CSS

I want to create a <hr> divider using Tailwind CSS, but instead of the horizontal rule spanning the entire width of the page unbroken, I want to add some text in the middle.

For example:

----------------------------------- Continue -----------------------------

I can't find anything like this in the documentation. How can I achieve this effect?

If necessary, I can change the HTML to something other than an <hr> element. That was just the only way I knew how to create a horizontal rule.

htmlcsstailwind-css


Solution 1:[1]

You can use this HTML syntax to create what you want :

<div class="relative flex py-5 items-center">
    <div class="flex-grow border-t border-gray-400"></div>
    <span class="flex-shrink mx-4 text-gray-400">Content</span>
    <div class="flex-grow border-t border-gray-400"></div>
</div>

See here the result: https://play.tailwindcss.com/65JULZ5XES

Solution 2:[2]

Try this instead...

<div class="py-4">
    <div class="w-full border-t border-gray-300"></div>
</div>

Example

https://play.tailwindcss.com/5pqhRGN8dQ

Solution 3:[3]

Yes, you can do this:

<script src="https://cdn.tailwindcss.com"></script>
<h1 class="text-center overflow-hidden before:h-[1px] after:h-[1px] after:bg-black 
           after:inline-block after:relative after:align-middle after:w-1/4 
           before:bg-black before:inline-block before:relative before:align-middle 
           before:w-1/4 before:right-2 after:left-2 text-xl p-4">Heading
</h1>

Solution 4:[4]

Try this.

Need to adjust the height, margin, bg-color, etc. to fit your website.

https://play.tailwindcss.com/FzGZ1fMOEL

<div class="h-5 border-b-4 border-black text-2xl text-center">
    <span class="bg-white px-5">your text</span>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 TylerH
Solution 4

Related Questions