Css pseudo-class 'after' not working with tailwindcss-CodePudding

I'm trying to recreate this with tailwindcss: Hover effect : expand bottom border 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>

)
}

CodePudding user response：

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>