How to remove underline from text css

CssHow-ToBeginner · 3 min read

How to Remove Underline from Text in CSS Easily

To remove underline from text in CSS, use the text-decoration: none; property on the element. This stops the browser from showing the default underline, especially on links.

📐

Syntax

The CSS property to remove underline is text-decoration. Setting it to none removes any underline or line decoration from the text.

text-decoration: The CSS property controlling text lines like underline, overline, or line-through.
none: The value that removes all text decorations.

css

selector {
  text-decoration: none;
}

💻

Example

This example shows a link without underline using text-decoration: none;. The link text looks clean without the default underline style.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Remove Underline Example</title>
<style>
a {
  text-decoration: none;
  color: blue;
  font-size: 1.2rem;
}
a:hover {
  text-decoration: underline;
}
</style>
</head>
<body>
<p>Here is a <a href="#">link without underline</a> by default.</p>
</body>
</html>

Output

A webpage showing a blue link text 'link without underline' with no underline normally, but underline appears on hover.

⚠️

Common Pitfalls

Sometimes the underline does not disappear because:

The text-decoration is overridden by other CSS rules with higher priority.
The element is not the one styled (e.g., styling span inside a link instead of the a tag).
Browser default styles or user agent styles apply underline unless overridden.

Always check CSS specificity and ensure you target the correct element.

css

/* Wrong: styling span inside link does not remove underline on the link itself */
a span {
  text-decoration: none;
}

/* Right: style the link directly */
a {
  text-decoration: none;
}

📊

Quick Reference

Summary tips to remove underline from text:

Use text-decoration: none; on the element.
Target the correct element, usually the a tag for links.
Check for other CSS rules that might override your style.
Use browser DevTools to inspect and debug styles.

✅

Key Takeaways

Use text-decoration: none; to remove underline from text in CSS.

Apply the style directly to the element that has the underline, often the a tag for links.

Check for conflicting CSS rules that might override your text-decoration setting.

Use browser DevTools to inspect and fix style issues quickly.