Beyond basic underlines, use text-underline-offset to gracefully lift underlines off descenders for cleaner readability and text-decoration-thickness to control their weight. This nuanced control significantly enhances the visual hierarchy and professionalism of your UI's interactive elements, making links more appealing and legible without needing complex hacks or custom SVG solutions.
a {
text-decoration: underline; /* Ensure underline is present */
text-decoration-color: var(--link-color, #007bff); /* Customize color */
text-underline-offset: 0.2em; /* Lift underline off descenders for better readability */
text-decoration-thickness: 1px; /* Control underline thickness for visual harmony */
transition: text-decoration-color 0.3s ease, text-underline-offset 0.3s ease;
}
a:hover {
text-decoration-color: var(--link-hover-color, #0056b3);
text-underline-offset: 0.25em; /* Slightly lift more on hover for subtle feedback */
text-decoration-thickness: 2px; /* Emphasize underline on hover */
}