The effect we want to achieve is to add a small icon to all links pointing to non-this site to tell users that clicking this link will take you away from this site. This is an external link. Of course, this may be achieved through more complex JavaScript, but we can now achieve this function through CSS 3 attribute selectors.
a[href^=”http:”] {
background:url(images/externalLink.gif) no-repeat right top;
padding-right:10px;
}
The meaning of the above code is: All links starting with http: will be added with a small arrow icon to remind the user that this is an external link, and the user will leave the site when clicked. It can be said that this function is very user-friendly and highlights the ease of use of web design.
Of course, this is because all links pointing to this site use relative addresses. What if the link to this site also starts with http:, or 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 those starting with http: are added with the external link icon, and those that start with http://www.dudo.org/ are not used. Natural relative addresses do not start with http. The arrow icon will not appear.
Article source: http://www.dudo.org/article/CSSJS/use_new_tech_of_CSS.htm