Пять вариантов текстовой ссылки на чистом CSS. Первые три рисуют подчёркивание при наведении — слева, справа или от центра — и показывают маленькую стрелку, которая поднимается снизу.
Два последних заливают ссылку белой плашкой по высоте или по ширине через mix-blend-difference, поэтому текст под ней инвертируется. Все эффекты наследуют размер и цвет текста родителя.
Скопируйте эти файлы в components/link-hovers/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { LinkFillWidth, LinkUnderlineLeft } from "@/components/link-hovers/link-hovers";
export function Links() {
return (
<nav className="flex flex-col gap-4 text-2xl">
<LinkUnderlineLeft href="/contact">Написать нам</LinkUnderlineLeft>
<LinkFillWidth href="/about">О студии</LinkFillWidth>
</nav>
);
}hrefАдрес ссылки
Тип string
childrenТекст ссылки
Тип ReactNode
className?Дополнительные классы ссылки
Тип string