Signify "PDF Bombs" - Triky CSS

Anonim

Akýkoľvek starý odkaz môže byť odkazom na dokument PDF, ale kliknutie na takýto odkaz, ak si myslíte niečo iné, môže byť pre používateľa prekvapujúce a nepríjemné. Tento CSS môže tieto odkazy vizuálne označiť.

/* 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) ")"; )

Takže ...


Watch out for the PDF bomb here!

Vizuálne sa stáva:

Watch out for the PDF bomb (PDF) here!

Alebo…


Watch out for the PDF bomb here!

Stáva sa:

Watch out for the PDF bomb (PDF, 2 MB) here!

Prečítajte si Pen Identify PDF Bombs od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.