Highlighting Downloadable documents and feeds
Another common frustration is clicking on a link thinking it is going to take you to a page only for it to start downloading a PDF or Microsoft Word document. Luckily, CSS can help us distinguish these types of links as well. This is done using the [att$= val] attribute selector, which targets attributes that end in a particular value, such as pdf or .doc:
Example:
a[href=".pdf"] {
background:url(images/pdflink.gif) no-repeat right top;
padding-right: 10px;
}
a[href=".doc"] {
background:url(images/wordlink.gif) no-repeat right top;
padding-right: 10px;
}
So in a similar way to the previous examples, you can highlight links to word documents or PDFs with their own separate icon, warning people that they are downloads rather than links to another page
Lastly, many people have RSS feeds on their website well specially blogs like WordPress. The idea is for people to copy these links into their feed readers. However, inadvertently clicking one of these links may take you to a page of seemingly meaningless data to avoid possible confusion. You could highlight RSS icon:
a[href=".rss"] {
background:url(images/rsslink.gif) no-repeat right top;
padding-right: 10px;
}
Tags: anchor tag hightlight, css link highlighting, css link styling, link highlighting, links, styling links