CODEWITHSUNDEEP
htmlcsshyperlinknavigationtext-decorations
Muhammad Nouman Ali
Muhammad Nouman Ali

Reputation: 44

Why can't I remove the underline from my navigation links?

I'm working on a simple navigation bar, but I can't seem to remove the underline from my links.

Here's my code:

a {
  text-decoration: none;
}
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

I expected this to remove the underline, but it's still there. I also checked if my CSS file is linked correctly, and it is

What am I missing? Is there another way to remove the underline?

Upvotes: 0

Views: 62

Answers (3)

test
test

Reputation: 7

The issue might be due to another CSS rule with higher specificity overriding your rule. For example, you might have a rule like nav a or a:visited that's causing the underline to appear. You can try increasing the specificity by using:

nav a {
  text-decoration: none;
}

If that doesn't work, test by temporarily adding !important:

a {
  text-decoration: none !important;
}

This helps determine if another rule is interfering. Usually, adjusting the specificity or order of your CSS rules resolves the issue.

Upvotes: -2

Alireza Hedayati
Alireza Hedayati

Reputation: 76

force it with !important :

a {
  text-decoration: none !important;
}
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

or maybe the problem is that the CSS file isn't linked.

Upvotes: -2

Jocelyn
Jocelyn

Reputation: 3

You could try putting the style inline until you are able to get the CSS to work, or in the head section. There could be another more specific rule overriding the simple CSS on the <a tag.

Upvotes: -3

Related Questions