Great CSS Effects #3

In the first two parts of this series, we learned about some of the effects that CSS can perform on your images. Now let's review some effects that CSS can perform on your links. These will work on all of your links, but this article will focus on your visited links. Most of these methods will work with all browsers. An exception being that pseudo elements not working with Internet Explorer.

The first code is very basic and it will put a line through your link text once the link has been visited. Simple but very effective. Here is an example and the code:

This code will allow you to put a background image in front of or behind your link, depending on if the padding is set to right or left . To get the most use of it you will need a 10 pixel by 10 pixel gif image. Be sure to use a gif, since it will produce the best results. Here is what it will look like and the code:

Now we can put a little spin on this one by adding a mouseover effect. By changing the code to the following, it will light up the checkmark when you scroll your mouse over the link. Which looks like this.

Now for the before and after pseudo elements that I mentioned earlier. There are a lot of things that you can do with these, but since they are not supported across the board I will only talk about 2 effects. The first is a really simple one that puts a message after you link once it has been visited. You could use this to say "You've been here" or something of the sorts. Here is an example and here is the code:

This is my favorite one on the list. I love mouseover effects and this is a really cool one. It works similarly to the one above, but only does so when you put your mouse over the already visited link. Here is an example and here is the code:

These are useful to people with color blindness or who use readers to view websites, but if over used they could become frustrating to some people. I hope this helps to shed some light on your visited links.