CSS Menu Tools

I Removed Link Underlines With CSS. Here’s What Actually Worked.

Written by

in

I’m Kayla, and yes, I’ve done the “make all links look clean” thing. More than once. I tried it on a client’s fashion blog, my own portfolio, and a SaaS dashboard. Some parts sang. Some bits… didn’t. You know what? Removing link underlines can look neat. But it can also hurt people who need clear cues.

So I’ll show what I did, what broke, what I kept, and the exact CSS that stuck.

Quick take

  • Good for nav bars, buttons, and cards.
  • Risky inside long paragraphs.
  • Keep strong focus and hover states.
  • Test on phones. It’s different with thumbs.

I tested on: Chrome 128 (Windows 11 + macOS), Safari 17 (macOS Sonoma + iOS 17), and Firefox 130 (macOS). Real devices: MacBook Air M2, a beat-up Windows laptop, and an iPhone 15. Nothing fancy. Just real screens.

Why I even removed underlines

Short story. A client said, “Links feel noisy.” The nav looked busy. Card grids looked cramped. I agreed. But removing all underlines? That felt wrong in long text. Reading a blog post with zero underlines is like walking without street signs.

So I split it: remove underlines in UI parts. Keep them in content. For a quick primer on the simplest CSS you can use for that, the folks at HubSpot outline a tidy snippet that mirrors what I started with.

Real example 1: Clean nav, but still clear

This was for a fashion blog header. Simple, neat, still clickable.

HTML:

<nav class="site-nav">
  <a href="/">Home</a>
  <a href="/new">New</a>
  <a href="/sale">Sale</a>
  <a href="/contact">Contact</a>
</nav>

CSS:

.site-nav a {
  text-decoration: none;
  color: #111;
  padding: 0.5rem 0.75rem;
  display: inline-block; /* bigger tap target */
}

.site-nav a:hover,
.site-nav a:focus-visible {
  text-decoration: underline;
}

.site-nav a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

Why it worked: no underline by default, but a clear underline on hover and on keyboard focus. I like the outline too. It helps folks who tab through links. It helped me, honestly. If you want a quick way to experiment with nav styles, I sometimes spin up a demo in CSS Menu Tools, then pull the bits I need.

If you’d like to see the full blow-by-blow from my very first test run, I logged it in a companion case study: I removed link underlines with CSS. Here’s what actually worked.

Real example 2: In articles, I kept the underline (but made it nicer)

My portfolio posts needed clear links. So I didn’t remove them. I just styled them so they looked sharp.

article a,
.prose a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.08em;
  text-decoration-skip-ink: auto;
}

article a:hover,
.prose a:hover {
  text-decoration-thickness: 0.12em;
}

article a:visited,
.prose a:visited {
  color: #6b3fa0; /* legal visited change */
}

This felt friendly. The underline sits a bit lower. Ink skips the descenders on letters like g and y. It reads clean.

For a pricing page, I had links that behaved like buttons. Underlines looked odd there.

HTML:

<a class="btn-link" href="/pricing">See pricing</a>

CSS:

.btn-link {
  text-decoration: none;
  color: #0b6bcb;
  font-weight: 600;
  border-bottom: 2px solid currentColor; /* visual anchor */
  padding-bottom: 2px;
}

.btn-link:hover,
.btn-link:focus-visible {
  border-bottom-color: transparent;
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

It reads “button” without faking a real button. And it’s still keyboard-friendly.

If you want to peek at how a real-world product leans on bold, underline-free buttons to drive sign-ups, the team behind Plancul.app keeps the call-to-action crisp and clear; browsing their homepage is a quick way to see these principles in the wild.

While auditing directories that juggle dozens of thumbnail cards, I also pulled up the Michigan listings on Slixa to see how they strip default underlines yet maintain obvious card interactivity; it’s a handy benchmark when you need proof that card-level links can stay intuitive even in a dense grid.

I had product cards. Underlines inside a tight grid looked messy. So I stripped them and made the whole card clickable.

HTML:

<a class="card" href="/product/123">
  <img src="dress.jpg" alt="Red summer dress">
  <h3>Summer Dress</h3>
  <p>Light and breezy.</p>
</a>

CSS:

.card {
  text-decoration: none;
  color: inherit;
  display: block;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.card:hover,
.card:focus-visible {
  box-shadow: 0 0 0 3px #cde4ff;
}

.card h3 {
  text-decoration: none; /* prevent nested underline defaults */
}

It looked tidy. And with a strong focus ring, I didn’t lose clarity.

What went wrong (and how I fixed it)

  • I once set a { text-decoration: none; } globally. Big mistake. Blog posts lost their cues. People missed links. I rolled it back and scoped it to nav, cards, and buttons only. I’m not alone—Stack Overflow’s highest-voted answer on the topic flags the same pitfall.
  • In Safari, focus rings looked thin on dark headers. I bumped outline to 3px on dark themes.
  • On mobile, hover doesn’t exist. So I kept a bold color or a border cue that shows on focus as well.
  • A client used Tailwind. Their reset made some underlines vanish. I added utilities: underline for prose, no-underline for nav.

On a few WordPress builds, Gutenberg’s default CSS was the next hurdle. I ended up stripping most of it and wrote about the fallout here: I removed Gutenberg CSS in WordPress—was it worth it?

For component libraries like PrimeVue, the cascade can get just as unruly. I shared the exact selectors I overrode in this de-stress recap: How I override CSS in PrimeVue and kept my sanity

Tailwind quick helpers I used:

  • prose links: underline underline-offset-2
  • nav: no-underline hover:underline focus-visible:underline
  • focus: focus-visible:outline focus-visible:outline-2 focus-visible:outline-current

Bootstrap note:

  • .text-decoration-none removes underlines. I paired it with .link-underline on hover via custom CSS.

My small, reliable CSS set

I carry this between projects. It keeps me out of trouble.

/* 1) Keep underlines in content */
.prose a,
article a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.08em;
  text-decoration-skip-ink: auto;
}

/* 2) Remove underlines in UI zones */
.site-nav a,
.card a,
.btn-link,
.footer-nav a {
  text-decoration: none;
}

/* 3) Strong focus for everyone */
a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* 4) Hover or focus turns on a cue if underline is off */
.site-nav a:hover,
.site-nav a:focus-visible,
.footer-nav a:hover,
.footer-nav a:focus-visible {
  text-decoration: underline;
}

/* 5) Tap targets feel nicer */
.site-nav a,
.footer-nav a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
}

/* 6) Visited links stay legal and readable */
.prose a:visited {
  color: #6b3fa0;
}

Accessibility check I actually run

  • Can I tab through all links? Do I see a clear ring?

More posts