Modern CSS offers precise control over underlines. Use text-underline-offset to prevent descenders from clashing with the underline, significantly improving legibility. Pair it with text-decoration-thickness for a visually balanced and accessible UI, especially crucial for link states in #WebFonts.
a {
text-decoration: underline;
text-decoration-color: var(--link-color, #007bff); /* Custom color or theme variable */
text-underline-offset: 0.2em; /* Lifts the underline to prevent descender clash */
text-decoration-thickness: 0.08em; /* Controls the underline's thickness */
transition: text-underline-offset 0.2s ease-in-out, text-decoration-thickness 0.2s ease-in-out;
}
a:hover {
text-underline-offset: 0.25em; /* Slightly lift on hover */
text-decoration-thickness: 0.12em; /* Slightly thicker on hover */
}