[chrismorgan]

> I'm so used to links not being underlined

Here’s a user stylesheet I’ve been using for 2½ years (when color-mix() landed behind a pref in Firefox Nightly!):

  :any-link {
      text-decoration: underline color-mix(in srgb, currentcolor 30%, transparent) !important;
  }

  :any-link:is(:hover, :active, :focus) {
      text-decoration: underline !important;
  }

This means links get a semitransparent underline normally, and full-opacity on hover. I reckon it’s an excellent balance. Occasionally you’ll get double underlining due to people using border-bottom instead of text-decoration for some unfathomable reason, and occasionally there’ll be link-styled buttons that won’t get this underline, but all up I’ve found it pretty good as an intervention.

(I’ve been using this technique on websites I make since 2019, though I haven’t yet had the opportunity to use color-mix() on a public site, which only stabilised in browsers 6–11 months ago. My preferred technique there will be `:any-link:where(:not(:hover, :active, :focus)) { text-decoration-color: color-mix(in srgb, currentcolor 30%, transparent); }`.)

[pbowyer]

This is a really nice technique, thanks for sharing.

Question: why would you prefer the latter technique on public sites, vs what's in your user stylesheet?

[chrismorgan]

The user stylesheet version is deliberately blunt, done in two rules to forcibly override whatever the author may have done, to both the normal and the interacting experience.

If you control the site’s styles, it’s better to keep specificity as low as reasonable (which I decided meant one pseudoclass—you could reduce it to zero by shifting the `:where(` to the start, but I decided not to for some reason), and only change what you need to change (which is the text-decoration-color—notably, not the entire text-decoration—on links that aren’t being interacted with.

Why? Because as well as being shorter and more conceptually elegant (and frankly, I place likely-disproportionate value on it being just one declaration, pride probably factoring in), it makes it easier to override when you want to. Suppose, for example, you want <a class="button"> to not get underlines because you’re making it look like a button (for better or for worse): you can write `.button { text-decoration: none; }`, just like you would have done previously, and it’ll work fine. Against the user stylesheet approach, even stripped of its !importants, you’d still get an underline on hover until you increased specificity (e.g. `.button.button`, and I’m assuming this is coming after the :any-link:is(…) rule, or else you’ll want `.button.button.button`) or reduced its specificity (which I grant :is → :where can do).