Use text-decoration: none on a link to remove its underline. Before doing that, consider how readers will recognize it. In article prose, keeping the underline is usually the clearest choice.

Working example

Use a visible navigation treatmentLink

HTML and CSS

HTML

<nav aria-label="Example sections"><a href="#details">Read details</a></nav>
<h2 id="details">Details</h2>
<p>The border and navigation placement identify this link before hover.</p>

CSS

nav a {
  display: inline-block;
  padding: 0.7rem 1rem;
  border: 1px solid #2563eb;
  text-decoration: none;
}
nav a:hover,
nav a:focus-visible {
  text-decoration: underline;
}
nav a:focus-visible {
  outline: 3px solid #111827;
  outline-offset: 3px;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Keep more than a color difference

The example uses a border, location within navigation, and a clear focus outline. Tab to the link, then press Enter to reach the section. An underline that appears only on hover is unavailable to someone using a touchscreen; give links a persistent cue too.

Removing a link’s own decoration may not remove a decoration propagated from an ancestor. See text-decoration for that behavior. An <a> without href is not a normal navigation link, so use a real destination rather than a dummy href="#".

If the control performs an action, use a button, not a link styled as one. A CSS reset’s exact link styles depend on the reset; do not assume every reset removes underlines.

Sources

Reference 1 Reference 2 provide the technical details and current compatibility information.