"text-decoration" and the ":after" pseudo-element [duplicate]

Asked 25/7, 2009 at 1:33 Answered 25/7, 2009 at 1:45

Like all right-thinking people, I hate to click on a link and discover too late that it leads to a browser-crippling PDF or Microsoft Office file. I thought I'd make life a bit easier for people by displaying a little icon next to links that lead to such files. With IE8 finally supporting the :after pseudo-element, I thought the CSS declaration would be fairly simple:

a.file_pdf:after {
    content:url('/images/pdf.png');
    text-decoration: none;
    padding-left: 5px;
}

In IE8, this works fine. In Firefox and Chrome, though, text-decoration: none is ignored, and the underline stretches unattractively across the bottom of the icon. Is there a way to fix this without "cheating" by using an extra <span> tag?

Apulia answered 25/7, 2009 at 1:33 Comment(0)

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>

Proteus answered 25/7, 2009 at 1:45 Comment(4)

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. – Respirable 25/7, 2009 at 2:4

Interesting selector. How's the compatibility issue in IE6? will it just ignore it or freaky results will come out? – Jolinejoliotcurie 25/7, 2009 at 2:9

@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. – Droppings 25/7, 2009 at 2:17

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. – Apulia 25/7, 2009 at 2:28

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.

Jolinejoliotcurie answered 25/7, 2009 at 1:43 Comment(0)

Here's a complete example

Recommended topics

Hot tags