Hey there! I’ve been in your shoes before — trying to shake an annoying underline that just won’t budge even after tweaking CSS. Let’s break down why text-decoration-style: none; isn’t working and how to fix it:

1. You’re using the wrong CSS property #

text-decoration-style only controls the style of the underline (like dashed, dotted, or solid) — it doesn’t actually remove the underline itself. To fully eliminate it, you need to target the line itself with either:

• The shorthand property (most common and clean):

  /* This is the correct way to remove underlines */
  your-target-selector {
    text-decoration: none;
  }
  

• Or the specific text-decoration-line property:

  your-target-selector {
    text-decoration-line: none;
  }
  

2. Your style is being overridden by higher-priority CSS #

Browsers prioritize more specific selectors, inline styles, or rules marked with !important. To fix this:

• Use a more specific selector to target your text. For example, if the text is a link inside a navigation bar:

  nav a.your-custom-link-class {
    text-decoration: none;
  }
  

• Right-click the problematic text and select "Inspect" to open your browser’s DevTools. Check the "Styles" panel to see which CSS rule is actually applying the underline — look for crossed-out versions of your rule (signaling it’s being overridden) and the active rule that’s winning.
• As a last resort (try to avoid this if possible), use !important to force your rule to take effect:

  your-target-selector {
    text-decoration: none !important;
  }
  

3. The "underline" isn’t actually a text decoration #

Sometimes what looks like an underline is actually a border-bottom property. Check if your element has something like this:

your-target-selector {
  border-bottom: 1px solid #333;
}

If so, remove it or set it to border-bottom: none; to get rid of the line.

4. Double-check inheritance (rare but possible) #

While text-decoration doesn’t inherit by default, some edge cases (like nested elements or browser-specific styles) might cause it to appear. Make sure you’re applying the text-decoration: none; rule directly to the element that’s showing the underline, not just its parent.

Pro tip: Use your browser’s DevTools "Computed" tab to see the final applied styles for text-decoration — this will tell you exactly where the underline is coming from.

内容的提问来源于stack exchange，提问作者Satyam Singh