Compass Designs .net

At Joomlashack University we have a main page that lists all the tutorials that are available. We have had several student requests that it would be useful to easily see what lessons they had visited.

Short of some custom programming to achieve this, we implemented a simple visual icon with CSS that would show next to any link that had been clicked on. It uses the a:visited property.

Here is an example. Click on the link and you'll see the icon appear.

The code looks like this:

<style type="text/css">
<!--
.visitedlinks a:visited {
background-image: url(http://www.joomlashack.com/university/templates/ js_joomlashacku/images/tick.png);
background-position: right center;
background-repeat: no-repeat;
padding-right:20px;
}
-->
</style>
<div class="visitedlinks">
<a href="#">this is a link
</a>
</div>

Feel free to use it on your own sites!