Fatal编程技术网
  • css/
  • Css &引用；“文字装饰”；而":“之后”；伪元素

Css &引用；“文字装饰”；而":“之后”；伪元素

css

Css &引用；“文字装饰”；而":“之后”；伪元素,css,pseudo-element,Css,Pseudo Element,和所有思维正常的人一样，我讨厌点击链接，发现它会导致无法浏览的PDF或Microsoft Office文件，但为时已晚。我想通过在指向这些文件的链接旁边显示一个小图标，可以让人们的生活更轻松一些。随着IE8最终支持：在伪元素之后，我认为CSS声明将相当简单： a.file_pdf:after { content:url('/images/pdf.png'); text-decoration: none; padding-left: 5px; } 在IE8中，这很好用。不

和所有思维正常的人一样，我讨厌点击链接，发现它会导致无法浏览的PDF或Microsoft Office文件，但为时已晚。我想通过在指向这些文件的链接旁边显示一个小图标，可以让人们的生活更轻松一些。随着IE8最终支持
：在
伪元素之后，我认为CSS声明将相当简单：


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



在IE8中，这很好用。不过，在Firefox和Chrome中，
文本装饰：none
被忽略，下划线在图标底部的延伸不太吸引人。有没有一种方法可以在不“作弊”的情况下通过使用额外的
标记来修复此问题？
使用背景图像如何


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


编辑


测试并在我的FF 3.5上完美运行，在大多数浏览器中应该没有问题，因为只使用传统的图像替换技术。
我正在以不同的方式进行测试，使用背景图像和填充（如下所示）：

这也适用于IE7

这里有一个完整的例子
在IE7中，PDF图标不可见，因为它不理解数据URI：


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




PDF
答：林克，
a:参观了{
颜色：317408；
背景：#eee；
}
a[href$=”.pdf“]{
右边填充：21px；
背景图片：url（数据：数据：数据：图像/png；Bas64，这项研究是一项研究，一项研究是一项研究，该研究是一项研究中的一项研究，该研究是一个研究中的数据。数据：图片：图片：图像/巴巴巴巴巴巴新；基础64，一项研究是一项研究，该研究是一项研究中的一个研究，该研究的数据是由一个研究中的一个研究，一个研究，一个新的研究，一个新的研究，一个新的一个新的数据。图片：图像（数据：图片：图片：图片：图片：图片：图片：图片：图片：图片：图像：图片：巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴巴新的数据：图片。巴巴巴巴新；巴巴新；巴巴巴巴巴巴巴新；巴巴巴巴巴巴新；巴巴巴巴巴巴新；巴新；巴巴巴巴巴巴巴巴新；巴DUWBSVQJ2U4ODMOAWVAPVA（2）一个简单的（2）一个简单的（2）一个简单的（2）一个简单的（2）一个简单的（2）一个简单的（2）一个简单的（2）一个简单的（2）一个简单的（2）一个简单的（2）一个简单的（2）一个简单的（2）一个简单的（2）一个简单的（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个（2）一个）一个）一个）一VFBTSRUM1HTBKVPMFIUNUSBRV3B4EV6bsbyXlPdkbr/u+StHUkxruBPY+0KY8f38oWX/BYVNADLUHNLOXDB+UYQFPCWZ3NT69 BYWKJXJNB1O9FV/ASQ5s+ABZ8I2AAAAAEELFTKSUQMCC）；
背景重复：无重复；
背景位置：右下角；
}
a:悬停{
颜色：#eee；
大纲：无；
背景色：317408；
文字装饰：无；
}




我喜欢这种方法。它还意味着你可以将不同类型（如果需要）的所有图标作为“精灵”放在一张图像中使用
背景位置
。有趣的选择器。IE6中的兼容性问题如何？它会忽略它还是会出现异常的结果？@xandy，IE6不支持它，但我不知道它可能会导致什么问题。可能需要一些条件注释，尽管我到目前为止没有遇到任何问题。哦，这是真的漂亮！这正是我想要的…谢谢。我可能会尝试使用条件注释和JavaScript为IE6拼凑一些东西，但这些天它只提供了大约10%的访问者，所以可能不值得。

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