Tähistage "PDF-pomme" - CSS-trikid

Anonim

Iga ankrulink võib olla link PDF-dokumendile, kuid muul viisil mõtlemisel sellise lingi klõpsamine võib olla kasutaja jaoks üllatav ja ebamugav. See CSS võib neid linke visuaalselt tähistada.

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

Nii et ...


Watch out for the PDF bomb here!

Visuaalselt saab:

Watch out for the PDF bomb (PDF) here!

Või…


Watch out for the PDF bomb here!

Saab:

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

Vaadake CodePenis Chris Coyieri (@chriscoyier) pliiatsi tuvastamise PDF-pomme.