「text-decoration」と「:after」疑似要素 [重複]

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

  •  19-09-2019
  •  | 
  •  

質問

この質問にはすでに答えがあります:

すべての正しい考えを持つ人々と同じように、私もリンクをクリックして、ブラウザーに支障をきたす PDF や Microsoft Office ファイルにつながっていることに手遅れになって気づくのが嫌いです。そのようなファイルにつながるリンクの横に小さなアイコンを表示することで、人々の作業を少しでも楽にしたいと考えました。IE8 がついにサポートしました :after 疑似要素の場合、CSS 宣言はかなり単純になるだろうと思いました。

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

IE8ではこれで問題なく動作します。ただし、Firefox と Chrome では、 text-decoration: none は無視され、下線がアイコンの下部に不格好に伸びてしまいます。追加のツールを使用して「不正行為」をせずにこれを修正する方法はありますか? <span> 鬼ごっこ？

役に立ちましたか？

解決

私は、の属性セレクタを使用して、さまざまな方法でそれをやっています背景画像とパディング（ xandyも）：

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

これはあまりにもIE7で動作します。

ここ

完全な例です

IE7では、それはデータのURIを理解していないとして、PDFのアイコンが表示されなくなります：

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

他のヒント

どのように背景画像を使用してはどうですか？ 

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

EDIT

テストと私のFF 3.5上で完全に実行される、唯一の伝統的なイメージの代替技術を使用しているので、ほとんどのブラウザには問題はないはずです。

所属していません StackOverflow
scroll top