Adding Images to Links

Using images with links provides a visual cue that lets you know something about the link such as, what type of file it links to, whether it takes you off-site or even just as a way of displaying a logo next to specific link destinations.

An example on Wikipedia is this:

Link Images

Link Images

The icon next to the link denotes that the link will take you outside of the current site.

To style this type of CSS attribute selector as it’s known, you basically look for some common text string in all the links you want the graphic to appear next to. In the case of these absolute URLs perhaps it would be the “http” inside the href.

Once you have decided on your specific string, you add some css like this:

a[href*=http] {
background-image: url(‘images/external.png’);
background-repeat: no-repeat;
background-position: right;
padding-right: 5px;
}

The first line tells us we are looking for the http string inside our href. If we are wanting to target a string that contains spaces or any non-alphanumeric characters (such as http://) we would have to enclose it in quotes like this:

a[href*=”http://”]

It’s a simple device and very helpful once you know how to use it!

other page


What do you think?

It's good to talk!

Your email address will not be published.