A React link with a hover underline that inverts on interaction. Pure Tailwind CSS, accessible and easy to customize.
import { InvertLink } from "@/components/invert-link";
function InvertLinkDemo() {
return (
<InvertLink href="#">Hover me</InvertLink>
);
}Copy and paste the following code into your project.
import Link from "next/link";
export const InvertLink = ({className, children, ...props}: React.ComponentProps<typeof Link>) => (
<Link
className={`${className} text-2xl relative after:content-[''] after:absolute after:h-px after:bottom-0 hover:after:left-0 after:right-0 after:w-0 hover:after:w-full after:bg-black after:transition-all after:duration-200`}
{...props}
>
{children}
</Link>
);