ansaurus

Question

"text-decoration" and the ":after" pseudo-element

Answer 1

+1 A:

how about using background image?

a.file_pdf {
    background: url('/images/pdf.png') no-repeat right;
    padding-right: 30px;
    ...
}

EDIT

Test and runs perfectly on my FF 3.5, should have no issue in most browser since only using traditional image replacement technique.

xandy 2009-07-25 01:43:30

Answer 2

+2 A:

I'm doing it in a different way, using attribute selectors, a background image and a padding (as xandy also suggested):

a[href$=".pdf"] {
  padding-right: 21px; /* space for the icon */
  background: url(graphics/pdf.png) no-repeat right bottom;
}

This works in IE7 too.

Here's a complete example

In IE7 the PDF icon won't be visible as it does not understand data URIs:

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>PDF</title>
<style type="text/css">
a:link,
a:visited {
  color: #317408;
  background: #eee;
}
a[href$=".pdf"] {
  padding-right: 21px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHhSURBVDjLjZPLSxtRFIfVZRdWi0oFBf+BrhRx5dKVYKG4tLhRqlgXPmIVJQiC60JCCZYqFHQh7rrQlUK7aVUUfCBRG5RkJpNkkswrM5NEf73n6gxpHujAB/fOvefjnHM5VQCqCPa1MNoZnU/Qxqhx4woE7ZZlpXO53F0+n0c52Dl8Pt/nQkmhoJOCdUWBsvQJ2u4ODMOAwvapVAqSJHGJKIrw+/2uxAmuJgFdMDUVincSxvEBTNOEpmlIp9OIxWJckMlkoOs6AoHAg6RYYNs2kp4RqOvfuIACVFVFPB4vKYn3pFjAykDSOwVta52vqW6nlEQiwTMRBKGygIh9GEDCMwZH6EgoE+qHLMuVBdbfKwjv3yE6Ogjz/PQ/CZVDPSFRRYE4/RHy1y8wry8RGWGSqyC/nM1meX9IQpQV2JKIUH8vrEgYmeAFwuPDCHa9QehtD26HBhCZnYC8ucGzKSsIL8wgsjiH1PYPxL+vQvm5B/3sBMLyIm7GhhCe90BaWykV/Gp+VR9oqPVe9vfBTsruM1HtBKVPmFIUNusBrV3B4ev6bsbyXlPdkbr/u+StHUkxruBPY+0KY8f38oWX/byvNAdluHNLeOxDB+uyQQfPCWZ3NT69BYJWkjxjnB1o9Fv/ASQ5s+ABz8i2AAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: right bottom;
}
a:hover {
  color: #eee;
  outline: none;
  background-color: #317408;
  text-decoration: none;
}
</style>
</head>
<body>

<p>
   <a href="document.pdf">Here's the PDF</a>
</p>

</body>
</html>

Ionuț G. Stan 2009-07-25 01:45:10

I like this method. It also means you can put all the icons for different types (if required) in one image as "sprites" and use `background-position`.

DisgruntledGoat 2009-07-25 02:04:26

Interesting selector. How's the compatibility issue in IE6? will it just ignore it or freaky results will come out?

xandy 2009-07-25 02:09:48

@xandy, it's not supported in IE6, but I have no idea what problems it may cause. Probably some conditional comments would be needed, though I didn't encounter any issues thus far.

Ionuț G. Stan 2009-07-25 02:17:32

Ooh, that's nifty! This is exactly what I wanted... thanks. I may try to cobble something together for IE6 using conditional comments and JavaScript, but it's only supplying about 10 percent of our visitors these days so it's probably not worth it.

phenry 2009-07-25 02:28:26

ansaurus

tags:

views:

answers:

"text-decoration" and the ":after" pseudo-element

Here's a complete example

related questions