Towards a more perfect link underline

Re:Towards a more perfect link underline by dredmorbius on Monday December 01, 2014 @12:04AM (#8679593)

That's among the reasons I generally ad an on-hover very slight background color shift to links. It allows me to see what the boundaries of a link are before clicking it. I also dispense with the underline on links by default.

The following is from what I call my "unstyled" CSS -- I'll apply it to bare-bones HTML websites.

    a {
        color: #1e6b8c;
        text-decoration: none;
        transition-property: color, background-color;
        transition-duration: 0.3s;
        transition-timing-function: linear;
        transition-delay: 0.1s;
    }

    a:visited {
        color: #6f32ad;

    }

    a:hover {
        text-decoration: underline;
        background: #f0f0ff;
    }

    a:active {
        background-color: #427fed;
        color: #fffff6;
    }

[ Parent | on HN ]

Re:Towards a more perfect link underline by danielnixon on Monday December 01, 2014 @12:14AM (#8679627)

Your a:hover styles should also be applied to a:focus [0]. You might also want to read about why using only color to differentiate links is bad practice [1].

[0] http://www.456bereastreet.com/archive/201004/whenever_you_us...

[1] http://www.w3.org/TR/WCAG20-TECHS/F73.html

[ Parent | on HN ]

Re:Towards a more perfect link underline by dredmorbius on Monday December 01, 2014 @11:06AM (#8681743)

Most of my work has a single highly specific consumer: me. I'll restyle websites to remove distractions and improve clarity, focus, and readability. I do this very nearly as casually as breathing now (Chrome, Element Inspector, and Stylebot FTFW).

If you'll apply those styles to a page, you'll find that:

* Links are colored. Blue colorblindness is quite rare. That's arguably a far better choice than the orange/red links I'm seeing more frequently now. For myself, I find underlines distracting.

* On hover they're underlined and the background cover shifts.

* On click, foreground and background colors are inverted.

Your point on :focus vs. :hover is probably well-taken, though those have been equivalent for my use.

I've encountered a number of sites with disappearing sub-menus (themselves an arguably broken UI element), where the rule for visibility is :hover of the/a parent element. Which means that when the pointer moves off the parent and onto the submenu, the submenu disappears. LinkedIn has been exhibiting this recently.

[ Parent | on HN ]