Highlighting different types of link
Some of you might already know this technique but for people still learning CSS this might help you.
A link from your website to an external page can be highlighted without using a class or an id for each anchor.
To identify if your link an external link using [href^="http:"]
#container p a[href^="http:"] {
background: url(images/externalLink.gif) no-repeat right top;
padding-right: 10px;
}
#container p a[href^="http://www.bestwebbuzz.com"], a[href^="http:// bestwebbuzz.com"] {
background-image: none;
padding-right: 0;
}
<div id=”container”>
<p><a href=”http://www.google.com/”>This is an external link</a></p>
this is how it would look like
- External Link Screen Shot
Links mixed with internal and external links
<p>And here is a reasonably long line of text containing an <a href=”http://www. bestwebbuzz.com/index.php”>absolute internal link</a>, some text, an <a href=”http://www.yahoo.com/”>an external link</a>, some more text, a <a href=”css-button.htm”>relative internal link</a> and then some more text.</p>
</div>
this is how it would look like
mixed with internal and external links
You can even do it with this links
mailto:
aim:
<p>Contact me by <a href=”mailto:info@andybudd.com”>email</a><br />
Send me an <a href=”aim:goim?screenname=andybudd”>instant message</a> using AIM/iChat.</p>
This is how it would look like
- highlighting im and email links
Unfortunately this does work on IE6 but work on modern browsers.
You can download source here external_link
This post will be continueed on the next post so watch out for that.
Tags: anchor tag hightlight, css link highlighting, css link styling, link highlighting, links, styling links