Oznacz "PDF Bombs" - CSS-Tricks

Anonim

Każde stare łącze kotwicy może być łączem do dokumentu PDF, ale kliknięcie takiego łącza w innym przypadku może być zaskakujące i niewygodne dla użytkownika. Ten arkusz CSS może wizualnie oznaczać te linki.

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

Więc…


Watch out for the PDF bomb here!

Wizualnie staje się:

Watch out for the PDF bomb (PDF) here!

Lub…


Watch out for the PDF bomb here!

Staje się:

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

Zobacz Pen Identify PDF Bombs autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.