CSS link no underline:How do I remove the underline from links in CSS in 2026?

Q: How do I remove the underline from links in CSS in 2026?

A: In 2026, the standard way to remove underlines from links is still the text-decoration property. Set text-decoration: none on your anchor elements: a { text-decoration: none; }. This removes the default underline html">applied by browsers. For more control, use text-decoration-line: none, which targets only the line without affecting color or style. If you want to remove underlines globally, html">apply it to the a selector. For specific links, use a class like .no-underline { text-decoration: none; }. Modern CSS also supports text-decoration-skip-ink, which affects how underlines interact with descenders, but that only matters when an underline exists. Remember that removing underlines can hurt accessibility because users rely on visual cues to identify links. In 2026, best practice is to pair text-decoration: none with another distinguishing style, such as a color change, font weight, or a border-bottom that html">appears on hover. This keeps your design clean while maintaining usability. Always test with keyboard navigation and screen readers to ensure links remain discoverable.

Q: What is the difference between text-decoration: none and text-decoration-line: none for links?

A: Both text-decoration: none and text-decoration-line: none remove underlines from links, but they work at different levels of the CSS text-decoration shorthand system. text-decoration is a shorthand property that resets all longhand values: text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness. When you write text-decoration: none, you are setting the line to none and resetting the other properties to their initial values, which can override inherited or previously set decoration colors and styles. In contrast, text-decoration-line: none only changes the line component, leaving color, style, and thickness untouched. This matters if you have complex decoration settings, such as a custom underline color on a parent element. In 2026, most developers use the shorthand for simplicity, but if you need granular control, the longhand is more precise. For removing underlines specifically, either works, but text-decoration: none is more common and concise. Be aware that text-decoration is not inherited, but it propagates to descendant boxes, so setting it on a parent can affect child links unless overridden.

Q: Does removing link underlines with CSS hurt accessibility in 2026?

A: Yes, removing link underlines can hurt accessibility if you do not provide alternative visual cues. Underlines are a widely recognized convention that signals clickable text, especially for users with cognitive disabilities or color vision deficiencies. In 2026, WCAG guidelines still emphasize that links must be distinguishable from surrounding text without relying on color alone. If you set text-decoration: none, you should add another differentiator, such as a bold font weight, a different color with sufficient contrast, or a subtle border-bottom that html">appears on hover or focus. For inline links within paragraphs, underlines are strongly recommended because color alone may not be enough. For navigation menus or buttons, removing underlines is generally fine because context and styling already indicate interactivity. Always ensure focus states are visible for keyboard users. A common 2026 pattern is to remove underlines by default but add them back on hover and focus, combined with a color change. Test your design with tools like Lighthouse and screen readers to confirm links remain perceivable and operable for all users.

Dialogue about

Common scenarios of "CSS link no underline"

【Student】 Hey, I'm trying to remove the underline from my links in CSS. How can I do that?

【Teacher】 You can use the text-decoration property and set it to none. For example: a { text-decoration: none; }

【Student】 Oh, that's simple. But will that remove the underline from all links?

【Teacher】 Yes, it will apply to all anchor tags. If you want to target specific links, you can use classes or IDs.

【Student】 What if I only want to remove the underline on hover?

【Teacher】 You can use the :hover pseudo-class. For example: a:hover { text-decoration: none; }

【Student】 But I want the underline to disappear only when the mouse is over the link, not by default.

【Teacher】 Ah, then you should set text-decoration: none on hover and keep the default underline otherwise. So: a:hover { text-decoration: none; }

【Student】 Wait, that would remove it on hover, but the default is underline. So the link would be underlined normally and not underlined on hover?

【Teacher】 Exactly. That's what you want, right?

【Student】 Yes. But I also want to change the color on hover. Can I do both?

【Teacher】 Sure. Just add color: red; (or any color) inside the a:hover block.

【Student】 What about visited links? Do they have underlines by default?

【Teacher】 By default, visited links are also underlined. You can style them with a:visited { text-decoration: none; } if you want.

【Student】 So if I want no underline at all, for all states, I can just do a { text-decoration: none; }?

【Teacher】 Yes, that will remove underlines from all links, including hover, visited, etc. But then you might want to add some other visual cue for hover.

【Student】 Got it. What about removing underline from a specific link inside a paragraph?

【Teacher】 You can add a class to that link, like <a class="no-underline" href="#">, and then .no-underline { text-decoration: none; }

【Student】 Great! That's very helpful. Thanks!

【Teacher】 You're welcome! Happy coding!