یک لینک را با CSS طوری استایل‌دهی کنید که در حالت عادی خط زیرین نداشته باشد و هنگام هاور خط زیرین ظاهر شود و رنگ آن نیز تغییر کند.

برای این کار در حالت عادی text-decoration: none; و در :hover از text-decoration: underline به‌همراه text-decoration-color برای تغییر رنگ زیرخط استفاده کنید. توجه داشته باشید که ویژگی‌هایی مثل text-decoration-color و text-decoration-thickness در مرورگرهای مدرن پشتیبانی می‌شوند اما انیمیشن‌پذیری مستقیم text-decoration در همه مرورگرها یکنواخت نیست و ممکن است رفتاری متفاوت نشان دهد. اگر نیاز به انیمیشن نرم دارید بهتر است از border-bottom یا یک ::after پنهان/نمایان استفاده کنید و تغییرات را با transform/width یا opacity انیمیت کنید. همچنین حتماً استایل‌های :focus یا :focus-visible را برای دسترسی‌پذیری صفحه‌کلیدی در نظر بگیرید.