« Text-decoration » et « : après » pseudo-élément [double]

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

  •  19-09-2019
  •  | 
  •  

Question

    

Cette question a déjà une réponse ici:

         

Comme tous les bien-pensants, je déteste de cliquer sur un lien et découvrir trop tard qu'il mène à un fichier PDF de navigateur paralysant ou d'un fichier Microsoft Office. Je pensais que je ferais la vie un peu plus facile pour les personnes en affichant une petite icône à côté des liens qui mènent à ces fichiers. Avec IE8 enfin soutenir le pseudo-élément :after, je pensais que la déclaration CSS serait assez simple: 

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

Dans IE8, cela fonctionne très bien. Dans Firefox et Chrome, cependant, text-decoration: none est ignorée, et le soulignement étend vilainement à travers le fond de l'icône. Est-il un moyen de résoudre ce problème sans « tricher » en utilisant une balise <span> supplémentaire?

Était-ce utile?

La solution

Je le fais d'une manière différente, en utilisant sélecteurs attribut , une image d'arrière-plan et un rembourrage (comme xandy également suggéré ): 

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

Cela fonctionne dans IE7 aussi.

Voici un exemple complet

Dans IE7 l'icône PDF ne sera pas visible car elle ne comprend pas URIs de données: 

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

Autres conseils

comment sur l'utilisation de l'image d'arrière-plan? 

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

EDIT

Test et fonctionne parfaitement sur mon FF 3.5, ne devrait avoir aucun problème dans la plupart navigateur puisque seulement en utilisant la technique de remplacement de l'image traditionnelle.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top