How to Remove Underlines From A-Href Links With CSS Using Selectors, States, and Inheritance

The fastest way to remove underlines from A href links is to set text-decoration: none; on the right selector, then repeat that choice for link states such as :hover, :visited, and :focus when needed.

TLDR: A developer can remove link underlines with a { text-decoration: none; }, but a safer method is to target only the links that need it, such as .nav a { text-decoration: none; }. In one small ecommerce header with 14 menu links, removing underlines only from navigation reduced visual clutter while keeping product description links underlined for clarity. Analytics teams often prefer that split approach because content links can keep their normal click cues, while menus stay clean.

Why Links Have Underlines by Default

Browsers underline anchor links because underlines are a clear signal. A visitor can scan a page and spot clickable text in seconds. That default is useful, but it is not always attractive in buttons, menus, cards, logos, and footer layouts.

The HTML link usually looks like this:

<a href="https://example.com">Visit example</a>

By default, most browsers apply a underline and a color. CSS can change that. The key property is text-decoration.

a {
  text-decoration: none;
}

This removes the underline from every anchor link on the page. That may sound perfect. The catch is that it can also remove a useful accessibility cue from article links, legal links, and help text links. A more careful selector usually works better.

Remove Underlines From All Links

For a full site reset, the broad selector is simple:

a {
  text-decoration: none;
}

This tells the browser that every <a> element should have no underline. It works on basic links, visited links, navigation links, and inline links unless another CSS rule overrides it.

Still, broad rules can cause odd side effects. Honestly, it feels like a five-second fix until a user misses an inline “terms and conditions” link because it now looks like plain text. For that reason, many teams avoid using this rule alone across a full site.

Remove Underlines With Class Selectors

A class selector gives more control. It lets a developer remove underlines from selected links only.

<a class="no-underline" href="/pricing">Pricing</a>

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

This approach is clean for one-off links. It is also helpful inside content management systems where a single link needs special styling.

For larger sections, the class can go on a parent element:

<nav class="main-nav">
  <a href="/home">Home</a>
  <a href="/shop">Shop</a>
  <a href="/contact">Contact</a>
</nav>

.main-nav a {
  text-decoration: none;
}

This selector means: select every anchor inside an element with the class main-nav. It removes underlines from the menu without touching links in paragraphs.

Remove Underlines From Link States

Anchor links have several states. A link can be unvisited, visited, hovered, focused, or active. Browsers and style sheets may treat each state differently.

a:link targets normal unvisited links.
a:visited targets links already visited by the user.
a:hover targets links when the pointer sits over them.
a:focus targets links selected by keyboard or assistive tools.
a:active targets a link during the click action.

A complete state rule may look like this:

.main-nav a:link,
.main-nav a:visited,
.main-nav a:hover,
.main-nav a:focus,
.main-nav a:active {
  text-decoration: none;
}

This keeps the navigation links free from underlines in every common state. Without these state rules, a theme or browser style may bring the underline back on hover or focus. It drives developers a little crazy when a menu looks fine, then gains underlines only after a cursor passes over it.

Keep Focus Styles Visible

Removing link underlines should not remove all feedback. Keyboard users need a visible focus style. If the underline goes away on focus, another cue should replace it.

.main-nav a {
  text-decoration: none;
}

.main-nav a:focus {
  outline: 2px solid #005fcc;
  outline-offset: 3px;
}

This pattern keeps the menu clean while still showing which link is selected. A focus outline may not match every visual style, but hiding it without a replacement is risky. Users who move through a page with the Tab key can lose their place fast.

Use Hover Underlines as a Click Cue

Another common pattern removes the underline by default, then restores it on hover.

.card-link {
  text-decoration: none;
}

.card-link:hover {
  text-decoration: underline;
}

This works well for blog cards, product cards, and sidebar links. The page looks cleaner at rest, but the hover state still confirms that the text is clickable.

Design teams often use this split in content-heavy pages. In a help center with 60 article links on one screen, constant underlines can feel noisy. Showing underlines only on hover can make the list calmer while keeping interaction clear.

How Inheritance Affects Link Underlines

CSS inheritance can make link styling feel confusing. Some text properties pass from parent elements to child elements. Link styles may also be affected by rules placed on containers.

For example:

.footer {
  text-decoration: none;
}

This may not reliably remove underlines from every link in the footer, depending on other rules. A direct anchor selector is clearer:

.footer a {
  text-decoration: none;
}

If a link inherits color from a parent, the underline may still be controlled by the link’s own rule. That is why a specific anchor selector is usually best.

Modern CSS also supports more detailed text decoration properties:

a {
  text-decoration-line: none;
}

Most developers still use text-decoration: none; because it is shorter and well understood.

Selector Specificity Can Override Link Rules

If an underline refuses to disappear, specificity is often the reason. A more specific rule beats a weaker rule.

a {
  text-decoration: none;
}

.article-content a {
  text-decoration: underline;
}

In this case, links inside .article-content stay underlined. The second selector is more specific.

To remove underlines in that area, the developer must match or beat the stronger selector:

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

!important can force the style, but it should be rare:

a {
  text-decoration: none !important;
}

That rule can create maintenance headaches later. Expect to waste time tracing why normal article links no longer show underlines after one global override gets added to a theme file.

Best Practices for Removing Link Underlines

Remove underlines from navigation links when spacing, color, and layout already make them clear.
Keep underlines on inline body links so readers can spot them easily.
Use hover or focus feedback if the default underline is removed.
Target sections with parent classes instead of styling every link globally.
Avoid hiding focus indicators unless a clear replacement is added.

A balanced CSS setup might look like this:

.site-header a,
.site-footer a {
  text-decoration: none;
}

.site-header a:hover,
.site-footer a:hover {
  text-decoration: underline;
}

.article-body a {
  text-decoration: underline;
}

This keeps header and footer links clean. It also preserves underlines in the main article area, where users expect them.

FAQ

How does CSS remove underlines from A href links?: CSS removes them with text-decoration: none;. The rule should target the anchor itself, such as a, .menu a, or a.no-underline.
Why does the underline come back on hover?: Another rule may style a:hover. The fix is to add a matching hover rule, such as .menu a:hover { text-decoration: none; }.
Should all link underlines be removed?: Usually no. Navigation links, buttons, and cards often look better without underlines. Inline text links often need underlines for clarity.
Does text-decoration: none; hurt accessibility?: It can if no other visual cue exists. Links should still stand out through color, spacing, shape, hover styles, or focus outlines.
What is the best selector for removing underlines in a menu?: A parent-based selector works well, such as .main-nav a { text-decoration: none; }. It controls the menu without changing every link on the page.