Docs
Double Underline
Show double underline for the text on hover or click
requires interactionhover
Installation
Run the following command
It will create a new file called double-underline.tsx
inside the components/animata/text
directory.
mkdir -p components/animata/text && touch components/animata/text/double-underline.tsx
Paste the code
Open the newly created file and paste the following code:
import { cn } from "@/lib/utils";
export default function DoubleUnderline({
className,
children,
...props
}: React.HTMLProps<HTMLSpanElement>) {
const common =
"absolute h-px w-full bg-blue-500 transition-all duration-200 group-hover:opacity-50 dark:bg-white/70";
return (
<span
{...props}
className={cn("group relative inline-block cursor-pointer text-blue-500", className)}
>
{children}
<span
className={cn(
common,
"pointer-events-none left-0 top-[calc(100%_-_2px)] group-hover:top-0",
)}
/>
<span className={cn(common, "-bottom-[2px] left-0")} />
</span>
);
}
Credits
Built by hari