Significa "bombas PDF" - Trucos CSS

Anonim

Cualquier enlace de anclaje puede ser un enlace a un documento PDF, pero hacer clic en un enlace como ese pensando lo contrario puede ser sorprendente e incómodo para un usuario. Este CSS puede significar visualmente esos enlaces.

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

Asi que…


Watch out for the PDF bomb here!

Visualmente se convierte en:

Watch out for the PDF bomb (PDF) here!

O…


Watch out for the PDF bomb here!

Se convierte en:

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

Consulte Pen Identify PDF Bombs de Chris Coyier (@chriscoyier) en CodePen.