Типографика typographylinknavigation
Smart Underline Link
Ссылка с красивым эффектом расширяющегося подчеркивания от центра.
Живое превью
Использование
Скопируйте и вставьте этот код на вашу страницу Astro:
astro
---
import { SmartUnderlineLink } from 'astro-component-kit';
---
<AnimatedUnderlineLink href="#">Content</AnimatedUnderlineLink>Ручная установка
Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/SmartUnderlineLink.astro:
astro
---
interface Props { href: string; }
const { href } = Astro.props;
---
<a href={href} class="smart-link"><slot /></a>
<style>
.smart-link { color: #818cf8; text-decoration: none; position: relative; font-weight: 600; padding: 2px 0; }
.smart-link::after { content: ""; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: #6366f1; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.smart-link:hover::after { width: 100%; left: 0; }
</style>Краткая информация
- Категория
- Типографика
- Имя файла
SmartUnderlineLink.astro- Зависимости
- Нет — чистый Astro + CSS
- Теги
- typographylinknavigation