What Does style="text-decoration:none" on an Tag Do and How Do You Use It?

style="text-decoration:none" on an <a> tag removes the underline that browsers apply to links by default. The link stays clickable and keeps whatever color it has; only the line under the text disappears. Use it when a design calls for unlined links — for example, navigation items, buttons, or card titles — and apply it to the anchor element itself, because the property affects the element it is set on, not its parents.

What the declaration actually does

text-decoration is a CSS shorthand that controls lines drawn on text: underline, overline, line-through, and none. Setting it to none draws no line. Browsers ship a default stylesheet that gives a:link and a:visited an underline, so text-decoration:none is the standard way to override that default.

The inline form looks like this:

<a href="/membership" style="text-decoration:none">Membership</a>

The result: the words "Membership" render without an underline, in the browser's default link color, and still navigate to /membership when clicked.

Apply it to the anchor, not a wrapper

Because text-decoration is not inherited in the way color or font-family is, putting the declaration on a parent <div> or <li> will not reliably strip the underline from the <a> inside it. The declaration has to reach the anchor itself:

<!-- Works: the declaration is on the <a> -->
<li><a href="/events" style="text-decoration:none">Events</a></li>

<!-- Does not remove the link underline -->
<li style="text-decoration:none"><a href="/events">Events</a></li>

If you need to remove underlines from many links at once, target them with a selector instead of repeating the inline style.

Prefer a class or stylesheet rule over inline styles

Inline styles win over most other rules, which makes them hard to override later and easy to duplicate across a page. A class is cleaner:

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

<a href="/about" class="nav-link">About</a>

If you want the underline back on hover — a common compromise between a clean look and discoverable links — add a hover rule:

.nav-link { text-decoration: none; }
.nav-link:hover,
.nav-link:focus { text-decoration: underline; }

Including :focus matters: keyboard users navigate by tabbing, and a visible change on focus helps them track where they are.

Common cases where it seems not to work

One subtlety: a decoration set on an ancestor can still be painted across a descendant, and a descendant cannot always cancel it by setting none. If you see a stubborn line, check the ancestors before adding more rules to the link.

Accessibility trade-off

Underlines are the strongest visual cue that text is a link, and they help users who cannot rely on color alone — including people with color vision deficiency and anyone reading in bright light or on a low-quality screen. Removing them is a legitimate design choice, but it shifts the burden onto other cues:

• Keep link color clearly distinct from body text.
• Add a hover and focus state so the link reacts when pointed at or tabbed to.
• In dense text, consider leaving underlines in place; in navigation bars and buttons, removing them is usually safe because position and shape already signal interactivity.

The declaration itself is harmless. The risk is a page where every link is unlined, the same color as surrounding text, and gives no feedback on hover or focus — at that point users can no longer tell what is clickable.

Quick reference

• What it does: removes the default underline from the element it is set on.
• Where to put it: on the <a> element, or in a CSS rule that targets anchors.
• Better practice: a class plus :hover/:focus rules rather than repeated inline styles.
• Watch for: decorations inherited from ancestors, specificity conflicts, and losing the visual cue that text is a link.