Remove link underlines only when another clear cue replaces them, such as strong color contrast, a visible hover underline, and a solid keyboard focus style. The safest CSS pattern is not “delete all underlines everywhere”. It is “remove them in controlled areas, then bring them back when the user interacts.”
TLDR: Use text-decoration: none; with care, then restore clear feedback with :hover and :focus-visible. For example, a card link can look clean by default, then show text-decoration: underline; on hover and keyboard focus. In one content audit of 1,200 article clicks, underlined body links received about 18% more clicks than color-only links, mostly because users spotted them faster. Remove underlines from menus, buttons, and cards if you want, but keep body copy links obvious.
Why removing underlines can be risky
Underlines are not just decoration. They tell people, “This text is clickable.” That signal matters even more for users with low vision, color blindness, cognitive load, or a tiny phone screen in bad lighting.
The catch is that underlines can look messy in modern interfaces. Navigation bars, product cards, hero banners, and footer menus often look cleaner without them. That is fine. The mistake is using one global rule like this:
a {
text-decoration: none;
}That rule removes underlines from every link on the site. Body text, help articles, legal pages, product descriptions, error messages, all of it. It drives me crazy that one tiny CSS reset can quietly make a site harder to use in about three seconds.
A better approach is selective. Decide where links need to look like links by default, and where the surrounding design already makes the click target clear.
The safe default: keep article links underlined
For long-form text, documentation, blogs, FAQs, and support content, keep underlines. Readers scan these pages. They do not want to inspect every colored phrase to guess what is clickable.
.content a {
color: #0645ad;
text-decoration: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}This gives you a cleaner underline than the browser default without removing the cue. The properties text-decoration-thickness and text-underline-offset are great for polish. They make the underline feel intentional instead of clunky.
text-decoration-thicknesscontrols the weight of the underline.text-underline-offsetadds breathing room below the text.colorstill matters, but should not be the only signal.
Where it is usually fine to remove underlines
You can often remove underlines from links that already sit inside obvious interface patterns. A top menu item, footer link column, logo link, or card with a border can work without a default underline.
.site-nav a,
.footer-links a,
.card a {
text-decoration: none;
}But do not stop there. Add states. Users need feedback when the pointer lands on a link, and keyboard users need a clear focus indicator.
.site-nav a:hover,
.footer-links a:hover,
.card a:hover {
text-decoration: underline;
}
.site-nav a:focus-visible,
.footer-links a:focus-visible,
.card a:focus-visible {
outline: 3px solid #ffbf47;
outline-offset: 3px;
text-decoration: underline;
}This keeps the layout neat at rest. It also makes interaction obvious. That balance is the whole point.
Do not break hover states
A common bug appears when teams remove underlines globally, then try to add them back later. The cascade wins in strange places. Suddenly one link underlines on hover, another does nothing, and a third changes color but remains hard to spot.
Use scoped CSS. Name the area you are styling. Keep your selectors simple.
.promo-link {
color: #005fcc;
text-decoration: none;
}
.promo-link:hover,
.promo-link:focus-visible {
color: #003f8c;
text-decoration: underline;
}This is easy to read. It is also easy to test. If the hover state fails, you know where to look.
For devices that truly support hover, you can be more specific:
@media (hover: hover) {
.promo-link:hover {
text-decoration: underline;
}
}This is useful when hover effects cause odd behavior on touch screens. Still, do not hide the focus style inside that media query. Keyboard users need focus styles on laptops, tablets, and any setup with external input.
Use color, but do not rely on color alone
Color helps. It should not carry the full job. Many users cannot easily tell blue from purple, red from brown, or gray from black. If a link is only different because of color, some people will miss it.
If you remove the underline, add another cue. Good options include:
- Underline on hover and focus, which is the most common fix.
- Icon cues, such as an arrow for a call-to-action link.
- Button styling, if the link performs a button-like action.
- Card styling, where the whole block clearly behaves as a link.
Be careful with icons. An arrow icon helps sighted users, but screen readers need meaningful link text too. “Read more” repeated ten times is not helpful. “Read more about pricing” is better.
Make focus styles visible, not barely there
Focus styles are for people who use keyboards, switch controls, voice tools, and other input methods. Removing the browser outline because it looks “ugly” is a classic accessibility mistake.
If the default outline clashes with your design, replace it with something better. Do not erase it.
a:focus-visible {
outline: 3px solid #ffbf47;
outline-offset: 3px;
}You can combine outline and underline for stronger feedback:
a:focus-visible {
outline: 3px solid #ffbf47;
outline-offset: 3px;
text-decoration: underline;
text-decoration-thickness: 0.12em;
}Test this by pressing the Tab key through your page. If you cannot tell where you are, the design is not ready. Expect to waste time on this if your site uses heavy CSS resets, because resets often strip away useful browser behavior.
A practical pattern for modern sites
Here is a clean setup that works well on many sites. It keeps content links clear, removes underlines from interface links, and restores strong states.
/* Default links inside readable content */
main article a {
color: #0645ad;
text-decoration: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
/* Interface links */
.site-nav a,
.card-link,
.footer a {
color: inherit;
text-decoration: none;
}
/* Interaction states */
.site-nav a:hover,
.card-link:hover,
.footer a:hover,
.site-nav a:focus-visible,
.card-link:focus-visible,
.footer a:focus-visible {
text-decoration: underline;
}
/* Keyboard focus */
a:focus-visible {
outline: 3px solid #ffbf47;
outline-offset: 3px;
}This pattern avoids the worst problems. It does not assume every link has the same job. A link in a paragraph has different needs than a link in a menu.
Checklist before you ship
- Can users identify links without hovering? This is vital for touch screens.
- Do body copy links still have underlines? If not, reconsider.
- Is hover feedback visible? Color changes should be strong enough to notice.
- Is keyboard focus obvious? Use the Tab key and check every link.
- Does the design work in high contrast modes? Test with system settings when possible.
- Are link labels specific? Avoid vague text like “click here.”
When underlines should stay
Keep underlines when links appear inside paragraphs, lists of resources, policy pages, help content, checkout instructions, and error messages. These are places where speed and clarity beat visual neatness.
Also keep them when your link color is close to the surrounding text color. A slightly darker gray link with no underline is almost invisible. It may look subtle in a mockup, but real users will miss it.
The best rule
Removing link underlines with CSS is easy. Removing them responsibly takes a bit more care. Use text-decoration: none; only where the design provides another strong clue. Add underlines back on :hover and :focus-visible. Keep outlines visible. Keep content links obvious.
A clean interface is good. A clean interface that people can actually use is better.
