“text-decoration”和“:after”伪元素答案

【问题标题】："text-decoration" and the ":after" pseudo-element [duplicate]“text-decoration”和“:after”伪元素
【发布时间】：2009-07-25 01:33:46
【问题描述】：

像所有思想正确的人一样，我讨厌单击链接并发现它会导致浏览器瘫痪的 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> 标签来解决这个问题而不会“作弊”？

【问题讨论】：

标签： css pseudo-element

【解决方案1】：

我正在以不同的方式进行操作，使用attribute selectors、背景图像和填充（如xandy also suggested）：

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

这也适用于 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>

【讨论】：

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

【解决方案2】：

使用背景图片怎么样？

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

编辑

在我的 FF 3.5 上测试并完美运行，在大多数浏览器中应该没有问题，因为只使用传统的图像替换技术。

【讨论】：