The effect we want to achieve is to add a small icon to all links that point to this site to tell the user that clicking on this link will cause you to leave this site, which is an external link. Of course this may be achieved through more complex JavaScript, but we can now implement this function through CSS 3 property selectors.
a[href^=”http:”] {
background:url(images/externalLink.gif) no-repeat right top;
padding-right:10px;
}
The above code means: All links starting with http: will have a small arrow icon, prompting the user to be an external link, and the user will leave this site by clicking. It can be said that this function is very user-friendly and highlights the ease of use of web design.
Of course, this is for links to this site that use relative addresses. What if the link to this site also starts with http:, or if it uses both absolute and relative addresses? We can use the following code:
a[href^=”http:”] {
background:url(images/externalLink.gif) no-repeat right top;
padding-right:10px;
}
a [href*=”www.dudo.org”] {
background:none;
padding: 0;
}
The above two rules are: all the icons starting with http: are added with external links, followed by http://www.dudo.org/, and they are not used, so they are naturally relative to the address because they do not start with http. The arrow icon will not appear.
Source: http://www.dudo.org/article/CSSJS/use_new_tech_of_CSS.htm