csstailwind-csspseudo-elementtailwind-elements

How to create pseudo border content with Tailwind CSS

So, I'm trying to make a top and bottom border on a nav menu in Tailwind CSS, I've tried using border-b-4 and border-t-4 with bg-indigo-500 but the border and the background didn't split at each other. I wonder if I can use it using pseudo-element or is there any better method for this? thank you!

here's my code :

'inline-flex items-center px-1 pt-1 border-b-4 border-t-4 border-indigo-400 text-sm font-medium bg-indigo-500 leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'

I want it to look like this :

Border nav with pseudo-element tailwind CSS

But instead, this is what I got :

Border nav tailwind CSS

Solution

  • You have almost done. I have write some steps for you to just need to follow. I have added working example below plz check it.

    1. Add <span> tag in button
    2. add padding and background color to the <span> tag
    3. remove background from <button> and add padding or border in <button> tag.
    <button type="button"
    class="inline-flex items-center py-2 border-b-4 border-t-4 border-indigo-400 text-sm font-medium  leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out">
    <span class="p-3 bg-indigo-500">Click Me</span>
</button>