SlashDot Style HyperLinks

In Slashdot‘s commenting system, you can see the URL of the site that the commenter has posted. This tutorial will show you how to do the same effect with just CSS and using the attr attribute.

Before we get started with the actual code, first we should learn a little about the attr attribute. Using the attr attribute, you can pull the value of an attribute from a tag. For example,img[title] will pull the value applied to any image’s title. If we have a title attribute set to “Now CSS Logo”, then img[title]’s value will be “Now CSS Logo”. It is that simple, nothing fancy, but we can use this simple attribute to create some fancier style pages. Let’s look at the CSS code that will allow us to create the SlashDot style hyperlinks.

a {text-decoration: none;
color: #8bb63b;}

a[href]:after{
color: gray;
content: " (" attr(href)")";
}

With the CSS, we have first removed all the underline from the hyperlink, and changed the color. You can keep the hyperlink’s underline, but it will also underline the text that comes after the actual link. An example would be if you link to nowcss.com, the link look similar to this NowCSS.com (nowcss.com).

The next part of the CSS is where the attr attribute comes into play. What we are telling the CSS to do, is to take any anchor tag with a href attribute, and place the attribute value after the link. We are also wrapping the output in parenthesis and making it a lighter color then the rest of the text on the page.

This effect would be great on commenting systems or anywhere a user can post a url. The downfall to this code is that it does not work in all browsers. Internet Explorer does not support the attr attribute at all. Where as Firefox (2.0.0.14) supports some attr attributes. Opera (9.15 Beta 1) supports it better then either IE or Firefox. Firefox could not pull the title or alt values from image tags, but Opera could. The great thing about this code is that if the browser does not support it, then it just does not show up on the page, the user would never know that they were missing a feature.

Leave a comment