Playing with Pseudo-Classes - Designing visited links

As a web designer oder developer you must have known that you can put some style into links such as color, remove the underline and creating interactivity that at the early time of web development mostly done by JavaScript such as switching the style of the link while user is going over the link with the cursor or what we called “Hover Effect”.

Pseudo-Classes are not a usual CSS selector as other normal selectors such as H1, P, BLOCKQUOTE or A. The different is that Pseudo-Classes are not based on any tags or attributes within HTML source. So we can say they are more than just that, they can refer to information that not only from the document. Let’s see some example of Pseudo-Classes:

A:link - for a normal link
A:visited - for a visited link

So that two example are very basic, what it says is that A:link refers to all link at the very beginning - unclicked. After a link is clicked, browser changes the state of that certain link as a visited link, the state of the visited links will stay until you clean up your browser from cached files. So basically you can style the visited state with different color or underlined it, etc. Now we know that Pseudo-Classes go beyond the document elements.

That was a basic kind of styling links. Now we want to offer our visitor an explicit notice for visited links instead of some styled notice such as different color, no-underline, etc. With the advance use of Pseudo-Classes we can add any kind of text to the links. What i have in my works section or see the “recent entries” part on the left sidebar, is that i add “viewed” to each link that visitor have clicked. This is how it works:

a:visited:after {content:” (viewed)”;color:#FF8CA3;font-size:90%}

As you see there is no DOM or AJAX magic to add class or style element, it all defined by that one line. Here we add a Pseudo-Element “after” which means that the style element take effect to the content after the visited link. The content after the link is also added using the attribute “content:”. I put some other style elements “color” and “font-size” to make it more stylish and different than the link it self.

Unfortunately the advance use of Pseudo-classes and elements with “after”, “before” and so forth does not work in IE browser, well other better browsers such as Firefox, Safari, Flock will accept it, which means that IE will follow them sometime in the future.

Leave a Reply

You must be logged in to post a comment.

Playing with Pseudo-Classes - Designing visited links

As a web designer oder developer you must have known that you can put some style into links such as color, remove the underline and creating interactivity that at the early time of web development mostly done by JavaScript such as switching the style of the link while user is going over the link with the cursor or what we called “Hover Effect”.

Pseudo-Classes are not a usual CSS selector as other normal selectors such as H1, P, BLOCKQUOTE or A. The different is that Pseudo-Classes are not based on any tags or attributes within HTML source. So we can say they are more than just that, they can refer to information that not only from the document. Let’s see some example of Pseudo-Classes:

A:link - for a normal link
A:visited - for a visited link

So that two example are very basic, what it says is that A:link refers to all link at the very beginning - unclicked. After a link is clicked, browser changes the state of that certain link as a visited link, the state of the visited links will stay until you clean up your browser from cached files. So basically you can style the visited state with different color or underlined it, etc. Now we know that Pseudo-Classes go beyond the document elements.

That was a basic kind of styling links. Now we want to offer our visitor an explicit notice for visited links instead of some styled notice such as different color, no-underline, etc. With the advance use of Pseudo-Classes we can add any kind of text to the links. What i have in my works section or see the “recent entries” part on the left sidebar, is that i add “viewed” to each link that visitor have clicked. This is how it works:

a:visited:after {content:” (viewed)”;color:#FF8CA3;font-size:90%}

As you see there is no DOM or AJAX magic to add class or style element, it all defined by that one line. Here we add a Pseudo-Element “after” which means that the style element take effect to the content after the visited link. The content after the link is also added using the attribute “content:”. I put some other style elements “color” and “font-size” to make it more stylish and different than the link it self.

Unfortunately the advance use of Pseudo-classes and elements with “after”, “before” and so forth does not work in IE browser, well other better browsers such as Firefox, Safari, Flock will accept it, which means that IE will follow them sometime in the future.

Leave a Reply

You must be logged in to post a comment.