Подпись "PDF-бомбы" - CSS-хитрости

Anonim

Любая старая ссылка привязки может быть ссылкой на документ PDF, но щелчок по такой ссылке, думающий иначе, может быть удивительным и неудобным для пользователя. Этот CSS может визуально обозначать эти ссылки.

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

Так…


Watch out for the PDF bomb here!

Визуально становится:

Watch out for the PDF bomb (PDF) here!

Или же…


Watch out for the PDF bomb here!

Становится:

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

Смотрите PDF-бомбы Pen Identify от Криса Койера (@chriscoyier) на CodePen.