The following image is a recent screen capture of our website front page. Notice that there are icons placed after all the text hyperlinks.
Today’s blog entry will discuss a fairly straight forward CSS method for adding this behavior to any web content, including legacy files.
Background
For our website, we wanted our text hyperlinks to be more obvious to our readers. In addition, we didn’t want to require any significant re-work of the exsisting content. So after studying how other popular websites were using this technique, we were able to modify a single CSS file and get the changes across our entire website, including our blog, online manuals, and technotes.
Additional requirements were:
- (
) Identify to the reader external links that are not on www.webworks.com or wiki.webworks.com.
- (
) Identify to the reader links that jump to a different topic somewhere on webworks.com.
- (
) Identify to the reader links that nest within a given topic, but are on a different page.
- (plain) Identify to the reader links that stay on the same HTML page.
- Make sure existing navigation links such as menus are not affected.
- Provide a simple mechanism for overriding the icon behavior using the “class” attribute.
- Be able to deploy it immediately without modifying any of the website.
- Make sure it works as designed for both Mozilla 1.x and IE 7 class browsers.
- Make sure that fallback behavior for non-supported browsers is functional.
Keys to Making it Work
- Use a CSS attribute selector such as: “
a[href]” to handle the default case.
- Use a CSS attribute selector such as: “
a[href^="http://"]” to determine type of link destination, by matching a beginning set of characters.
- Set a background image with a right position and a padding-right value to create the trailing icon.
- Use the correct order for each CSS rule so that the proper properties get set. For example: place the most general selectors first and then append other rules for additional exceptions based on pattern matching.
- If necessary, prefix the selectors with ancestor element types to restrict their use to just the content areas of the website.
Coding It
Sample CSS code
/* links to nested areas (drill down) */
a[href]
{
background: transparent url("/common/img/page.gif") no-repeat scroll right center;
padding-right: 13px;
}
/* links with in the same file */
a[href^="#"]
{
background: transparent none no-repeat 0 0;
padding-right: 0px;
}
/* links to external websites */
a[href^="http"]
{
background: transparent url("/common/img/www.gif") no-repeat scroll right center;
padding-right: 13px;
}
/* links to same website */
a[href^="/"], /* implicit */
a[href^="../"], /* out of current area, but still implicit */
a[href^="http://www.your_website.com"] /* explicit www.your_website.com */
{
background: transparent url("/common/img/jump.gif") no-repeat scroll right center;
padding-right: 13px;
}
/* links that should not have a button (must remove it) */
a[class]
{
background: transparent none no-repeat 0 0;
padding-right: 0px;
}
Limiting Behavior to Content Areas Only
Very likely you will want to limit this behavior to only the actual content parts of each HTML page, which will require a more complex CSS rule. Usually this can be easily accomplished using one or more ancestor prefixes for each CSS rule. Here is an example of the first CSS rule with an ancestor prefix in the selector.
/* links to nested areas (drill down) */
div.content p a[href]
{
background: transparent url("/common/img/page.gif") no-repeat scroll right center;
padding-right: 13px;
}
See our wiki at: http://wiki.webworks.com/DevCenter/Projects/HTML/AddingIconsToLinks for more details.
