How to Remove Underline from Links Using CSS

How to Remove Underline from Links Using CSS

Introduction

Designers often want cleaner link styling while keeping links discoverable. This guide provides concrete, production-ready techniques to remove or alter link underlines using CSS, with explicit patterns for Rails 7 apps, Tailwind CSS v3 workflows, and ActionMailer email templates. Examples include scoped SCSS, Tailwind utility integrations, accessible focus states, security notes for external links, and troubleshooting steps for common pitfalls (specificity, user-agent styles, Turbo partial updates, and email client quirks).

Understanding the Default Underline Behavior

Why underlines exist and what to replace them with

Underlines are a legacy affordance that provides an immediate visual indicator of clickability. When you remove the underline you must replace that affordance with equally clear cues for people using low-vision, keyboard navigation, or color-impaired perception.

  • Affordance: Underlines are a rapid visual signal that text is a link.
  • Fallback for color issues: Underlines help when link color contrast is marginal.
  • Context matters: preserve or reintroduce underlines in dense text, small fonts, or compact UI areas.

WCAG & Contrast Guidelines

Follow the Web Content Accessibility Guidelines (WCAG) when changing link styles. The authoritative source for WCAG guidance is the W3C: W3C. In practice this means:

  • Ensure link text color meets WCAG contrast thresholds against its background (WCAG 2.1 AA: at least 4.5:1 for normal text and 3:1 for large text). Use a contrast tool such as WebAIM to verify color combinations.
  • If you remove the underline, provide an additional visible state (underline on hover, bold weight, background highlight) so contrast-dependent users still perceive links as interactive.

Using CSS to Remove Underlines: The Text Decoration Property

Core technique (scoped)

Keep link-reset rules scoped to classes or components — avoid a global a { text-decoration: none; }. Use an explicit focus indicator for keyboard users and test with assistive technologies.

/* scoped approach (recommended) */
.link-no-underline {
  text-decoration: none;
  color: #0077cc; /* verify this color meets contrast per WCAG */
  transition: color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}
.link-no-underline:hover { color: #005fa3; text-decoration: underline; }
.link-no-underline:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,119,204,0.12);
  border-radius: 4px;
}

Security tip: for any link that opens a new tab include rel="noopener noreferrer" with target="_blank" to prevent tabnabbing. Accessibility tip: test focus states with real keyboards and screen readers (VoiceOver, NVDA).

Tailwind v3 Integration Example

The example below shows a responsive, accessible link styled using Tailwind CSS v3 utilities directly in a Rails link_to. This creates a button-like link on small screens and a compact, underline-on-hover link on larger screens. Tailwind focus utilities produce a consistent focus ring for keyboard users.

# app/views/shared/_cta_link.html.erb
<%= link_to 'Get started', signup_path, class: "no-underline text-blue-600 font-semibold hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 rounded px-2 py-1 sm:inline-block md:px-4 lg:px-3 sm:bg-transparent sm:text-inherit md:bg-transparent lg:bg-transparent sm:px-0 md:px-4" %>

Explanation of key utilities used (Tailwind v3):

  • no-underline — removes default underline at the base breakpoint.
  • hover:underline — reintroduces underline on hover for discoverability.
  • focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 — accessible focus ring for keyboard users.
  • Responsive padding (sm: md:) — changes tappable area across breakpoints.

Tip: if you use Tailwind component extraction, move the repeated utility set into a custom component class in @layer components inside your Tailwind stylesheet for reusability and easier testing.

Interactive Playground (copy-paste demo)

Copy the HTML/CSS below into any online editor such as CodePen or into a local HTML file to try the pattern interactively.

<!-- demo.html -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <style>
    .demo-link { text-decoration: none; color: #0a66c2; transition: color .15s ease; }
    .demo-link:hover { text-decoration: underline; color: #084b8a; }
    .demo-link:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(10,102,194,0.12); border-radius: 6px; }
    @media (max-width: 480px) { .demo-link { display: inline-block; padding: 12px 16px; background:#0a66c2; color: #fff; border-radius:6px; } }
  </style>
</head>
<body>
  <p>Normal flow link: <a href="#" class="demo-link">Read more</a></p>
  <p>Icon link (screen-reader text): <a href="#" class="demo-link"><span aria-hidden="true">🔗</span><span class="sr-only">Open resource</span></a></p>
</body>
</html>

Try toggling viewport width to see the mobile-friendly button-like behavior. This immediate feedback helps validate touch targets and focus states before rolling changes to production.

Key Takeaways

  • Scope underline removal with classes (e.g., .link-no-underline) rather than a global reset.
  • Always provide a visible :focus-visible state and other interactive cues (hover, weight, background).
  • For Rails, add classes using link_to, manage styles in component SCSS or Tailwind v3 files, and inline critical email styles with premailer-rails.
  • Test on mobile/touch, keyboard-only navigation, and email clients; reintroduce underlines in dense or small-text contexts if needed.

Frequently Asked Questions

How can I remove the underline from all links on my website?
Technically you can use a { text-decoration: none; }, but that removes a widespread affordance. It is better to apply a scoped class like .link-no-underline where appropriate and ensure alternative affordances are present.
What if my links still show underlines despite the CSS change?
Inspect computed styles in browser devtools. Check for user-agent styles, higher-specificity selectors, or CSS loaded later in the cascade. Ensure your stylesheet is included after vendor styles and that selectors are specific enough.
Can I add hover effects to links after removing the underline?
Yes. Use hover and focus styles (color change, underline on hover, background highlight) for clear interactive feedback. On touch devices, prefer larger hit targets or convert inline links into full-width, button-like controls.
David Martinez

David Martinez is Ruby on Rails Architect with 12 years of experience specializing in Ruby, Rails 7, RSpec, Sidekiq, PostgreSQL, and RESTful API design. David Martinez is a Ruby on Rails Architect with 12 years of experience building scalable web applications and database-driven systems. His expertise encompasses full-stack development, database design, computer graphics, and web security. David has worked on numerous enterprise-level projects, focusing on clean architecture, performance optimization, and secure coding practices. He specializes in creating robust, maintainable web applications using modern frameworks and best practices.

→ View all articles by David Martinez

Published: Nov 19, 2025 | Updated: Dec 27, 2025


Similar Tutorials

Explore Categories