任何普通的锚链接都可以链接到 PDF 文档，但如果用户误以为是其他类型的链接并点击，可能会感到意外和不适。此 CSS 可以直观地标记这些链接。
/* Add " (PDF)" text after links that go to PDFs */
a[href$=".pdf"]:after { content: " (PDF)"; }
/* If file size specified as data attribute, use that too */
a[href$=".pdf"][data-size]:after { content: " (PDF, " attr(data-size) ")"; }所以…
<p>Watch out for the <a href="some.pdf">PDF bomb</a> here!</p>视觉效果变成
Watch out for the PDF bomb (PDF) here!或者…
<p>Watch out for the <a href="some.pdf" data-size="2 MB">PDF bomb</a> here!</p>变成
Watch out for the PDF bomb (PDF, 2 MB) here!查看 CodePen 识别 PDF 炸弹 by Chris Coyier (@chriscoyier) on CodePen。
很久以前我发现了这个
http://pooliestudios.com/projects/iconize/
它可能比添加:after { content …}更有用。
另一个不错且有用的例子是维基百科链接到外部网站的方式。
干杯！
R
这个问题在于它必须对其中一个图像发出 HTTP 请求。除非你用某种精灵图像的技巧，否则我认为在 PDF 链接的末尾附加 (PDF) 就足够了。
此外，带有这些小图标的网站看起来有点杂乱。
Roflo，很棒的资源！谢谢
有没有办法用精灵图像来做到这一点？
你可以设置属性的样式吗？
(PDF，2 MB)
2 MB 部分。用 CSS？比如可能给它一个类？
我一直在尝试将其应用于输入按钮。我尝试过
input[type =”button”][title]:after { content: ” (” attr(title) “)”; }
以及
input[title]:after { content: ” (” attr(title) “)”; }
但是，两者都没有在按钮中通常显示的文本之后添加标题属性的内容。您对如何使其工作有任何建议吗？
示例：[按钮] —> [按钮（来自标题属性的工具提示信息）]
我不确定是否可行，但也许这里有人可以提供意见……
属性选择器 a[href$=”.pdf”] 的使用对我来说很有趣，而且你可以在链接前后添加内容这一点真的很酷，但我真正想做的是使用这个编码概念在<a>标签内设置一个属性，以便在它是 PDF 文件时在新窗口中打开目标……（即，target=”_blank”，或 onclick=”window.open(this.href);return false;）。
这不起作用，但类似的东西是我想到的……
a[href$=".pdf"] { [attr(target)="_blank"]; }我可能试图把方形钉子钉进圆孔，但如果这可行的话，那就太好了。
^生成的内容已经扩展了 CSS 目的的范围，而这个例子则更进一步。我认为如果你想自动将
target="blank"添加到 PDF 链接，最好进行一些服务器端脚本编写。你好，
在 Safari 中使用 PDF 炸弹时遇到一个奇怪的显示问题。链接状态不会显示文本超链接末尾的 (PDF，400 KB)，但当你将鼠标悬停在链接上时，它会显示出来，然后当你移开鼠标时又会消失。
到目前为止，我已经在 3 个网站上使用了它，并且每个网站都是一样的（在 Safari 中）。
不过在 Firefox 中没问题，真是奇怪！！
谁能解释一下这个现象。
谢谢
Gary
对于 PDF 链接，最佳实践是在链接中显示 PDF 大小以在用户点击之前提供信息吗？
有没有办法防止它在图像链接后出现？我正在尝试使用此样式，但没有效果
img a[href$=”.pdf”]:after { content: “”; }