Speed Up Border-bottom Under Links

|Reading time: 27 secs

To achieve more control over visual appearance of links, many CSS savvy designers use property border-bottom instead of underline. With border-bottom we can easily change color, style or thickness (border-width property) of the line below the link text. Let’s see if we can improve rendering of the border-bottom. For example:

a { color: #005; text-decoration: none; border-bottom: 1px solid #0CF; }

… will produce some fake link. See how color of the text and the color of the line under it is different. We can also change the thickness of that line:

a { color: #005; text-decoration: none; border-bottom: 2px solid #0CF; }

… and it looks like this: some fake link. It’s obvious – combinations with border-bottom are countless.

Border-bottom can make browser crawl

Rules explained above are nothing new to CSS guys. However, I keep seeing interfaces where hovering links with border-bottom slows down a browser. That is even more annoying when links don’t have border-bottom in the normal :link state, but have border property applied on :hover state. (Ed: I know I’ve been guilty more than once, especially on this web site, but on the other hand it’s not commercial site and I know my audience.)

I often see the following:

a { text-decoration: none; }
a:hover { text-decoration: none; border-bottom: 1px solid #0CF; }

… and that slows browser down.

Make It Easier For the Browser

If the link is in some paragraph and that paragraph has white background, with the simple:

a { text-decoration: none; border-bottom: 1px solid #FFF /* = background color of the parent element */ ; }
a:hover { text-decoration: none; border-bottom-color: #0CF; }

… browser only has to change border-color, not draw the whole new border.

Shown example can also be applied to background-color of the link. Again, if the parent element has white background, we add that same background-color to links:

a { background-color: #FFF /* = background color of the parent element */ ; }
a:hover { background-color: #0CF; }

Simple, huh? : )

Since I’m not browser developer I would like to hear from someone who can tell more about how browsers render elements and properties.

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?