“Text-decoration” e il “: dopo” pseudo-elemento [duplicato]

StackOverflow https://stackoverflow.com/questions/1180910

  •  19-09-2019
  •  | 
  •  

Domanda

    

Questa domanda ha già una risposta qui:

         

Come tutti i benpensanti, odio cliccare su un link e scoprire troppo tardi che porta a un file di Microsoft Office su browser paralizzando PDF o. Ho pensato di rendere la vita un po 'più facile per le persone visualizzando una piccola icona accanto ai collegamenti che portano a tali file. Con IE8 infine sostenere lo pseudo-elemento :after, ho pensato dichiarazione CSS sarebbe abbastanza semplice: 

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

In IE8, questo funziona bene. In Firefox e Chrome, però, text-decoration: none viene ignorato, e la sottolineatura si estende unattractively sul fondo dell'icona. C'è un modo per risolvere questo problema senza "barare" utilizzando un tag <span> in più?

È stato utile?

Soluzione

Lo sto facendo in un modo diverso, utilizzando attributo selettori , un'immagine di sfondo e un'imbottitura (come anche suggerito ): 

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

Questo funziona in IE7 troppo.

Ecco un esempio completo

In IE7 l'icona PDF non sarà visibile in quanto non capisce URI di dati: 

<!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>

Altri suggerimenti

Come sull'utilizzo di immagine di sfondo? 

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

Modifica

Prova e funziona perfettamente sul mio FF 3.5, dovrebbe avere alcun problema nella maggior parte del browser dal momento che solo usando la tecnica di sostituzione immagine tradizionale.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top