Css pseudo-class 'after' not working with tailwindcss

Issue

I’m trying to recreate this with tailwindcss however when I implement this the hover effect is not working.

export default Home(){
    return(
        <a
            href={item.href}
            className="px-3 py-2 text-sm font-medium after:origin-center after:scale-x-0 after:border-b-2 after:transition-all after:duration-500 after:ease-in-out after:content-none hover:after:scale-x-100 hover:after:border-white"
            aria-current="current item"
        >
           Item name
        </a>
    )
}

Solution

I created a working example using Tailwind following your desired result.

You can check the live demo here: stackblitz

The environment is installed following Tailwind official guide.

Hope this will help!

Example:

<div className="flex flex-col gap-6 justify-center items-center">
  <a
    href="#"
    className="inline-block text-4xl text-slate-400 uppercase visited:text-slate-400 hover:text-slate-400 after:block after:origin-center after:scale-x-0 after:border-b-4 after:transition-all after:duration-500 after:ease-in-out hover:after:scale-x-100 hover:after:border-sky-500"
    aria-current="current item"
  >
    Hover effect center
  </a>
  <a
    href="#"
    className="inline-block text-4xl text-slate-400 uppercase visited:text-slate-400 hover:text-slate-400 after:block after:origin-left after:scale-x-0 after:border-b-4 after:transition-all after:duration-500 after:ease-in-out hover:after:scale-x-100 hover:after:border-sky-500"
    aria-current="current item"
  >
    Hover effect left
  </a>
  <a
    href="#"
    className="inline-block text-4xl text-slate-400 uppercase visited:text-slate-400 hover:text-slate-400 after:block after:origin-right after:scale-x-0 after:border-b-4 after:transition-all after:duration-500 after:ease-in-out hover:after:scale-x-100 hover:after:border-sky-500"
    aria-current="current item"
  >
    Hover effect right
  </a>
</div>

Answered By – John Li

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published