The hidden impact of CSS underlines
On websites, underlined text is often used to highlight links, making them easy to spot on a page and instantly recognisable as links. Sometimes, though, the underline cuts through letters with descenders such as g, j, or y. When this happens, the text can become harder to read.
Recognising links
Underlined text plays a vital role in digital accessibility. For many people, especially those with low vision, dyslexia, or cognitive differences, underlines are one of the clearest ways to identify links. They also stand out for those who are not particularly tech-savvy, or for people who navigate websites using only a keyboard. Not everyone can move a mouse around the screen to check which parts of a page are interactive, so underlines are an important visual cue.
Descenders
Typography has a big impact on both accessibility and readability. Descenders are the parts of letters that extend below the baseline, found in lowercase characters such as g, q, p, y, and sometimes f. Some uppercase letters, like Q and J, also have descenders.
Far from being just decorative, ascenders and descenders are key to letter recognition and overall legibility. Well-proportioned descenders improve how quickly and easily letters are recognised. This is important for everyone, but it’s especially valuable for people with language processing difficulties.
The problem
When an underline sits too close to the text and cuts through the descenders, it undermines their usefulness and makes reading unnecessarily difficult. This happens because browsers typically decide where to place underlines and the result isn’t always neat or easy to read.
Adjusting the underline position may seem like a small detail, but it has a significant impact on how easily users engage with your content. As the saying goes: death by a thousand paper cuts, small irritations add up.
The solution
CSS provides a property called text-underline-position that solves this problem. This handy tool allows you to control exactly where an underline appears, keeping your text clean, legible, and user‑friendly.
The text-underline-position property works with text-decoration: underline;. While the default lets the browser decide, adjusting it can greatly improve readability.
The main options
- auto: Default setting — the browser chooses underline placement.
- under: Moves the underline slightly lower so it doesn’t interfere with letters that extend below the baseline.
- from-font: Uses the underline position defined by the font (if available).
- left and right: For vertical text; places the underline on the left or right side.
- initial: Resets to the default setting.
- inherit: Copies the underline setting from the parent element.
In summary
Underlined text is a simple but powerful tool that helps people recognise links on websites. By controlling where the underline sits, you can improve readability and reduce visual clutter, especially around letters with descenders.
Think of the text-underline-position property as teaching your underline some manners. Rather than awkwardly cutting through your letters, it positions the line neatly, making your text clearer, easier to read, and more accessible.
Accessibility is not just about design, it’s about ensuring everyone can interact with your content without unnecessary effort or strain.
At Access Advisors, we help organisations create digital spaces that are both inclusive and user‑friendly. If you’d like to learn more about how small changes like this can make a big difference for your audience, email the team today.
For more information
CSS text-underline-position property