Bezeichnen Sie "PDF Bombs" - CSS-Tricks

Anonim

Jeder alte Ankerlink kann ein Link zu einem PDF-Dokument sein, aber das Klicken auf einen Link wie diesen kann für einen Benutzer überraschend und unangenehm sein. Dieses CSS kann diese Links visuell kennzeichnen.

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

So…


Watch out for the PDF bomb here!

Visuell wird:

Watch out for the PDF bomb (PDF) here!

Oder…


Watch out for the PDF bomb here!

Wird:

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

Siehe den Stift Identify PDF Bombs von Chris Coyier (@chriscoyier) auf CodePen.