如何使用 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元素

另請參閱： Substring 匹配屬性選擇器