„Text-decoration“ und das „: Nach“ pseudo-Elemente [Duplikat]

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

  •  19-09-2019
  •  | 
  •  

Frage

    

Diese Frage bereits eine Antwort hier:

         

Wie alle rechtschaffenen Menschen, hasse ich auf einen Link klicken und entdecken zu spät, dass es zu einem Browser-lähmende PDF oder Microsoft Office-Datei führt. Ich dachte, ich das Leben ein bisschen leichter für die Menschen machen würde durch ein kleines Symbol neben Links angezeigt werden, die zu solchen Dateien führen. Mit IE8 schließlich das :after Pseudoelement unterstützt, dachte ich, die CSS Erklärung wäre ziemlich einfach sein: 

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

In IE8, das funktioniert gut. In Firefox und Chrome, wird aber text-decoration: none ignoriert, und die unterstrichenen erstreckt unansehnlich über den unteren Rand des Symbols. Gibt es eine Möglichkeit, dies zu beheben, ohne „Betrug“ durch einen zusätzlichen <span>-Tag?

War es hilfreich?

Lösung

Ich bin es auf eine andere Art und Weise zu tun, mit Attributselektoren , ein Hintergrundbild und eine Polsterung (wie xandy auch vorgeschlagen, ): 

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

Das funktioniert auch in IE7.

Hier ist ein komplettes Beispiel

In IE7 das PDF-Symbol nicht sichtbar ist, da es keine Daten URIs nicht versteht: 

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

Andere Tipps

, wie etwa Hintergrundbild verwenden? 

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

EDIT

Test und läuft einwandfrei auf meinem FF 3.5, sollte da nur mit traditioneller Bildersetzung Technik in den meisten Browser kein Problem hat.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top