<nav class="radikalwp-tx-ulink"><a href="#">خانه<//a><a href="#">خدمات<//a><a href="#">تماس<//a><//nav>
.radikalwp-tx-ulink { display: flex; gap: 24px; }
.radikalwp-tx-ulink a {
position: relative;
font-size: 15px;
color: #334155;
text-decoration: none;
padding-bottom: 5px;
}
.radikalwp-tx-ulink a::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 8px;
height: 2.5px;
background: #6366f1;
border-radius: 2px;
transition: width .3s ease, height .3s ease;
}
.radikalwp-tx-ulink a:hover { color: #6366f1; }
.radikalwp-tx-ulink a:hover::after { width: 100%; height: 3px; }
درباره این اسنیپت
زیرخط کوتاه که با هاور تمام عرض لینک را میپوشاند و ضخیمتر میشود؛ لینکها را زنده میکند. استاندارد ناوبریهای مدرن و فوترها. این افکت تایپوگرافی برای تیترها و بنرها طراحی شده و با فونتهای فارسی هم بهخوبی کار میکند. همه کلاسها با پیشوند radikalwp شروع میشوند تا با استایلهای قالب شما تداخلی پیش نیاید و راحتتر شخصیسازی شوند. انیمیشنها با GPU-friendly خواص transform و opacity ساخته شدهاند تا سرعت سایت شما تحت تأثیر قرار نگیرد.
پرسشهای متداول
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۰ از ۶ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!