CODEWITHSUNDEEP
htmlcss
Mansour Alnasser
Mansour Alnasser

Reputation: 5030

how to add File Format Icons next to link by using css

I have multiple links for Pdf, Doc, and Docx files that I want to show the File Format Icons next to it by using CSS only

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

I tried but it applies pdf icon on all

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

Upvotes: 1

Views: 623

Answers (1)

logi-kal
logi-kal

Reputation: 7880

Try this:

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

It selects the a elements whose href attribute's content ends with .pdf

See also: Substring matching attribute selectors

Upvotes: 1

Related Questions