如何使用css在链接旁边添加文件格式图标

Question

我有多个Pdf, Doc和Docx文件的链接，我想用CSS来显示旁边的文件格式图标

<a href="https://www.w3schools.com/resume.pdf"> Persone Name </a>
<a href="https://www.w3schools.com/resume.doc"> Persone Name </a>
<a href="https://www.w3schools.com/resume.docx"> Persone Name </a>

我试过了，但是它在所有

上应用pdf图标

a::after{
content: " " url("pdf-icon.png");
} 

Answer 1

试试这个:

a[href$=".pdf"]{
content: " " url("pdf-icon.png");
}

选择href属性内容以.pdf结尾的a元素

参见:子字符串匹配属性选择器