4 ms·
How do you feel about underline on hover, as a compromise between aesthetics and functionality? Eg, https://sdproto.gitlab.io/ https://sdproto.gitlab.io/
by smichel17 6y ago
How do you feel about underline on hover, as a compromise between aesthetics and functionality? Eg, https://sdproto.gitlab.io/ https://sdproto.gitlab.io/
- stan_rogers 6y agoIt's great if you hover, otherwise it isn't obviously a link. It's not a whole lot better than good ol' '90s mystery meat navigation.
- chrismorgan 6y agoI say it’s simply a bad technique. But here’s what I think is a good compromise in this space: a semi-transparent underline, made opaque on hover. I’ve taken to doing this for sites I make in the last couple of years as I find it makes links more pleasant to look at, and it gives a convenient way of indicating when you’re hovering over a link, which I think is also desirable. For example https://chrismorgan.info https://chrismorgan.info unvisited links are #03d with text-decoration-color #03d4. (It was #03d6 when I released the site, I reduced it to #03d4 after a while.) Sadly this currently requires adding a text-decoration-color property beside every link colour declaration, so if you vary your link colours in different contexts it requires a little more work, and if you want to make it themeable by variable you’ll have to use a preprocessor that can modify colours (e.g. scale-color($link-color, $alpha: -75%) in Sass), or use multiple CSS custom properties (--link-color: #03d; --link-underline-color: #03d4). I look forward to being able to just say `:link:not(:hover), :visited:not(:hover) { text-decoration-color: color-mod(currentColor alpha(25%)) }`.