Don't let default link underlines obstruct descenders or feel flimsy. Leverage text-underline-offset to gracefully position underlines below text baselines, preventing overlap with characters like 'g', 'p', 'q', and 'y'. Combine it with text-decoration-thickness to control the underline's visual weight, making links more legible and aesthetically integrated into your UI design, significantly boosting user experience.
a {
text-decoration: underline;
text-underline-offset: 0.2em; /* Adjust distance from baseline */
text-decoration-thickness: 0.08em; /* Control thickness of the line */
text-decoration-color: var(--link-color, #007bff); /* Custom color for the underline */
transition: text-decoration-thickness 0.2s ease-out, text-underline-offset 0.2s ease-out, text-decoration-color 0.2s ease-out;
}
a:hover {
text-decoration-thickness: 0.12em; /* Slightly thicker on hover */
text-underline-offset: 0.15em; /* Closer on hover for a subtle effect */
text-decoration-color: var(--link-hover-color, #0056b3);
}