Can I use stylesheets to inhibit link underlining? And why do I have to?

November 18, 2023 11:36 AM

Mozilla has removed the ability to show hyperlinks without underlines in Firefox. My attempts at forcing this with a css file aren't working. What does work? Can this still be done with other browsers? Could Mozilla now be ignoring this aspect of style sheets?

One of the earliest wwweb suggestions I took to heart was turning off link underlines, part of initial setup of any browser. (Since links are marked with a different color, the underlines are extraneous and clutter up the display.) But with my recent Firefox update, the familiar "Underline links" toggle under Settings->Manage Colors is gone, and web pages are now filled with underlines! But at least with my web pages, I should be able to handle this.

Style Sheets to the rescue. Everything suggests just turning off text decorations in the style sheet, two or three ways. Here's what I've tried, but underlines persist:

a:link { text-decoration: none;
}
a:visited { text-decoration: none;
}
a:hover { text-decoration: none;
}
a:active { text-decoration: none;
}

or maybe all at once with
a { text-decoration: none;
}

or even
*|*:any-link { text-decoration: none;
}

Any of this still working in Firefox for you? IIRC there is (or was) a Chrome Extension that could do this, too.

posted by Rash to Computers & Internet (8 answers total)

Have you tried the Default links not to be underlined Firefox extension? If it works, it would work on all webpages not just yours.
posted by Klipspringer at 12:00 PM on November 18, 2023

Response by poster: Yes - perfect - wonderful! Thanks Klipspringer.

But I'd still like to know why the css solution isn't working for me.
posted by Rash at 12:22 PM on November 18, 2023

The usual answer for me is "syntax error before the stuff that isn't working." Linter time?
posted by humbug at 1:00 PM on November 18, 2023 [1 favorite]

Is there any difference if you add !important to your rules?
posted by bcwinters at 1:01 PM on November 18, 2023 [3 favorites]

Best answer: It's usually either (#1) an error in the CSS file, or (#2) a later rule (perhaps in a different CSS file) supersedes the rule you entered.

My usual procedure to diagnose the problem is to right-click a link on the page in question, select "Inspect" and then use the tools there to figure out which CSS rules are in effect and which files are responsible for the rules.

When you "Inspect," one of the columns there will actually show you the CSS rules that are in effect, and which CSS files the various rules come from. It even shows you which rules from a particular file are NOT in effect because they are superseded by rules from a different file.

So what I usually do is go in & edit those files right in the Inspect pane until I achieve the results I want.

Then I go back & put those changes in place in the actual CSS file.

And now that reminds me, there is a THIRD reason your changes would not be taking effect: (#3) Caching. CSS files are cached up the wazoo. So you change your CSS file, you upload the new file, the browser is still using your old CSS file because it has it cached. Sometimes cached multiple times and ways in several different places.

Usually reloading the page with ctrl-F5 will force everything related to the page to reload, ignoring any cached elements. However, the exact procedure or buttons to press varies browser by browser. And the process can get pretty complicated because things can be cached in a bunch of different places. (A lot of the sites I work on use CloudFlare, so CSS files are cached there, as well as potentially on my browser AND on my server. Getting all those different places to release their cached files is sometimes a fairly knotty problem.) Here is a guide to getting your CSS files to re-load that might be helpful. Otherwise try searching for something like "force refresh of cached css files".
posted by flug at 2:29 PM on November 18, 2023 [4 favorites]

Metafilter does

a {
  text-decoration:none
}
a:hover,
a:active {
  text-decoration:none !important
}

posted by BungaDunga at 3:26 PM on November 18, 2023

Response by poster: a { text-decoration:none
}
is working for me now, must been something with the cache, thanks all! And yeah I've got to get more savvy with Inspect Element, thanks for the nudge, flug.
posted by Rash at 5:46 PM on November 18, 2023 [1 favorite]

Underlining links improves accessibility.
posted by headnsouth at 12:48 AM on November 19, 2023 [1 favorite]