Get Unvisited Links Noticed

There are two kinds of elements that make up a webpage - inline and block-level. Understanding the difference between them and knowing which elements are which is an important part of being a web developer. Without this knowledge it can be hard to see how an element affects the layout of a page's design.

Inline elements are things like <a>, <span> and <img>, which can all be in a line of text without breaking the flow of the text on to another line. Block-level elements on the other hand refuse to be on the same line as other elements and require a line break before and after them. Examples of block-level elements include <div>, <table>, <h1> and <p>.

Anyway, enough of that, here's something that might be useful. It's a hack I used about a month ago when I changed the way new article appear on this site. I was surprised that the method I used wasn't immediately obvious to some of you and decided to talk about it one day. That's what I am doing now. Although I am shocked there are still some of you who can't dig around the code and work it all out.

What I wanted was to highlight certain unvisited links in some way. Something like a border and a bright background colour. The trouble with giving inline elements borders and background colours is that they look like this.

This is an in-line link with a background colour and a border.

Not pretty is it!? What I wanted was a nice regular box shape. To do this I had to convert the link in to a block-level element, which is easily done and looks like this.

This is a block-level link with a background colour and a border.

Better. It might seem a little bit like a hack but it got the job done. Is there any perverse side effect of doing this? Not that I've seen so far.

On this site the "hot article" link also has an icon that changes and the links appear normal once visited. Here's how I did that.
 padding: 5px 5px 5px 20px;
 background: #fff url(file.gif) no-repeat 2px 8px;
 border: 1px solid #0069AC;
 background: #D0F4FF url(clipboard.gif) no-repeat 2px 8px;

The :link pseudo class refers to unvisted links and :visited is obviously the visited ones. The other styles apply to all links. Example link (follow it and return here to see the change):

There you go then. A simple way to highlight important links that a user has yet to visit. All using nothing but simple CSS. Not a cookie to be seen.


    • avatar
    • Jon
    • Fri 15 Apr 2005 07:15


    Can't you do this with in-line elements then? I've done something similar based on some code at {Link} and using the width hack to get elements in a block, take a look at their list-o-matic tool, which produces nice navigation based on [li] items, maybe you could do something similar?



    • avatar
    • Jake Howlett
    • Fri 15 Apr 2005 07:33

    Looking at their code they use somehting like this:

    #navcontainer li a


    display: block;




    Looks like it relies on the same hack.

  1. I suspected it was something like this - but its always nice to see the explanation. As always you do this so well.

Your Comments


About This Page

Written by Jake Howlett on Fri 15 Apr 2005

Share This Page

# ( ) '


The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social

About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »


Here are the external links posted on the same day.

More links are available in the archive »

More Content