CSS Link Underline Remove with Hover Effects

In web design, default link styling can clash with modern, clean aesthetics. The classic blue text with a persistent underline often feels outdated and can distract users from your content. Learning how to CSS link underline remove while still maintaining clear visual feedback on hover is one of the first customizations most developers and designers make. It’s not just about looks removing underlines improves readability, gives you full control over branding, and enhances user experience when done correctly.

Yet simply stripping the underline without replacing it with a smart hover effect can hurt usability. Visitors need to know something is clickable. This guide covers every practical way to remove link underlines using CSS, add elegant hover alternatives, and handle common platforms like WordPress and Elementor. Whether you’re a beginner or seasoned developer, you’ll walk away with clean, accessible, and professional-looking links.

Why Remove the Default Link Underline?

Browser-default link styles (blue color + underline) were designed in the 1990s when the web was mostly text. Today, with rich layouts and visual hierarchy, that underline often:

• Breaks visual flow in navigation menus
• Clashes with brand colors
• Looks cluttered on image-heavy or minimalist sites
• Reduces perceived sophistication

A 2024 Nielsen Norman Group study showed that subtle hover indicators (color shift, background fade, or animated underline) actually improve discoverability compared to permanent underlines, as long as the indicator is obvious on interaction.

Basic Method: CSS Link Underline Remove

The simplest and most universal way to remove underlines from all links is:

a {
  text-decoration: none;
}

To also remove the underline on hover, focus, and active states:

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
}

Or more concisely using the :not() pseudo-class with :where():

a:where(:not(:hover, :focus, :active)) {
  text-decoration: none;
}

This single line removes the underline by default but allows you to reintroduce styling only on interaction.

Modern Hover Alternatives (Better Than Static Underline)

Here are the most popular, accessible hover effects used by top sites in 2025:

1. Smooth Bottom Border Transition

a {
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease;
}

a:hover,
a:focus {
  border-bottom-color: #0066ff;
}

2. Animated Underline from Center

a {
  position: relative;
  text-decoration: none;
}

a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 50%;
  background-color: #0066ff;
  transition: width 0.3s ease, left 0.3s ease;
}

a:hover::after,
a:focus::after {
  width: 100%;
  left: 0;
}

3. Background Highlight Slide

a {
  text-decoration: none;
  background: linear-gradient(90deg, #0066ff 0%, #0066ff 100%);
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.4s ease;
}

a:hover,
a:focus {
  background-size: 100% 2px;
}

Sometimes you want underlines on content links but not in navigation:

/* Remove only from menu */
.main-navigation a,
footer a {
  text-decoration: none;
}

/* Keep in post content */
.post-content a {
  text-decoration: underline;
}

Or target by class:

.no-underline { text-decoration: none; }
.underline-on-hover:hover { text-decoration: underline; }

WordPress: Remove Underline from Links (Theme + Plugin Methods)

Method 1 – Add to Customizer (Appearance > Customize > Additional CSS)

Most WordPress themes let you paste:

a {
  text-decoration: none !important;
}

a:hover {
  text-decoration: underline; /* or use one of the hover effects above */
}

Method 2 – Child Theme style.css

Add the same code to your child theme stylesheet for permanent control.

Method 3 – Popular Page Builders

• Elementor remove underline from links: Select the widget → Style tab → Typography → Text Decoration → None
• To add custom hover: Advanced → Custom CSS → paste any hover effect above
• Beaver Builder / Brizy / Divi all have similar “Text Decoration: None” toggles

Note: Some themes (especially older ones) use !important on underlines. You may need:

a { text-decoration: none !important; }

Elementor Underline Links Issues & Fixes

Many Elementor users search “elementor underline links” because the default heading or text widgets sometimes force underlines. Quick fixes:

1. Select the text widget → Style → Typography → Decoration → None
2. For buttons: Button → Style → Typography → Decoration → None
3. Global fix via Theme Style → Typography → Links → Decoration: None

If you want underlines only on hover in Elementor Pro:

selector a {
  text-decoration: none;
}
selector a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

(Paste in Advanced → Custom CSS of the section/column)

Remove Underline from Image Links

Images wrapped in <a> tags often inherit underlines or display a border in older browsers.

a img {
  border: none !important;        /* Old IE/Edge fix */
  text-decoration: none;
  display: block;
}

/* Modern approach */
a {
  text-decoration: none;
}

To be extra safe:

img {
  border: 0;
  outline: none;
}

CSS Remove Hyperlink Styling Completely (Reset)

If you want to completely strip all default link styling:

a {
  color: inherit;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}

a:hover,
a:focus {
  color: #0066ff; /* or your brand color */
}

This makes links blend perfectly with surrounding text until hovered.

How to Underline Text in CSS (When You Actually Want It)

Sometimes you need manual underlines with more control:

.custom-underline {
  text-decoration: underline;
  text-underline-offset: 4px;  /* space between text and line */
  text-decoration-thickness: 2px;
  text-decoration-color: #0066ff;
}

These properties are widely supported in 2025 browsers.

Accessibility Best Practices

Never remove all clickability indicators. WCAG 2.2 success criterion 1.4.1 requires links be identifiable through more than just color. Always ensure:

• Hover/focus state has at least 3:1 contrast change
• Underline, color shift, or background appears on focus (keyboard users)
• Avoid underline-only identification if color blind users are a concern

FAQ

How do I remove underline from link word only in certain paragraphs?

Use a specific class:

.no-link-underline a { text-decoration: none; }

Then wrap the paragraph in <div class=”no-link-underline”>.

Why does my WordPress underline links even after adding CSS?

Your theme or a plugin (especially caching or optimization plugins) might be injecting inline styles. Use !important temporarily, then find the source, or add your CSS after all other stylesheets.

Can I remove underline from image links without affecting text links?

Yes:

a img { border:none; text-decoration:none; }

Is text-decoration: none; bad for SEO?

No. Google confirmed in 2023 that removing underlines does not hurt rankings as long as links remain discoverable and crawlable.

Elementor remove underline from links – is there a toggle?

Yes – select any text/button widget → Style tab → Typography → Text Decoration → set to “None”.

How to add underline only on hover in Elementor?

Go to Advanced → Custom CSS and paste:

selector a { text-decoration: none; }
selector a:hover { text-decoration: underline; text-underline-offset: 3px; }

My links still show underline on mobile – why?

Some themes add underlines via JavaScript or media queries. Inspect the element and override with a mobile-specific rule or add !important.

Final Thoughts

Mastering CSS link underline remove with thoughtful hover effects is a small change that dramatically elevates your site’s professionalism. Whether you choose a sleek sliding underline, subtle color shift, or full reset, the key is consistency and accessibility.