Signifique "Bombas de PDF" - CSS-Tricks

Anonim

Qualquer link de âncora antigo pode ser um link para um documento PDF, mas clicar em um link como esse pensando o contrário pode ser surpreendente e desconfortável para o usuário. Este CSS pode significar visualmente esses links.

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

Então…


Watch out for the PDF bomb here!

Visualmente se torna:

Watch out for the PDF bomb (PDF) here!

Ou…


Watch out for the PDF bomb here!

Torna-se:

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

Veja o PDF Pen Identify Bombs de Chris Coyier (@chriscoyier) no CodePen.