Будь-які відомі браузеру типи документів, такі як HTML, зображення, PDF-файл та ін, за посиланням відкриваються безпосередньо у браузері. Щоб браузер замість відкриття завантажував файл, до елемента <a> слід додати атрибут download, як показано в прикладі 1.
Приклад 1. Посилання для завантаження
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Скачування файлу</title> </head> <body> <p><a href="image/xxx.jpg">Звичайне посилання на картинку</a></p> <p><a href="image/xxx.jpg" download>Ця ж картинка для скачування</a></p> </body> </html>
Ці два посилання на свій вигляд ніяк не відрізняються один від одного, тому за допомогою стилів можна виділити посилання для скачування, додавши до них картинку. Для цього використовуємо селектор a[download] і тим самим вибираємо елементи <a>, у яких є атрибут download. Потім додаємо до селектора псевдоелемент ::after з властивістю content, значенням якого є адреса зображення (приклад 2). Інші властивості потрібні для зсуву картинки щодо тексту посилання.
Приклад 2. Картинка біля посилань для скачування
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Скачування файлу</title> <style> a[download]::after { content: url(/example/image/download.png); /* Виводимо картинку */
vertical-align: sub; /* Вирівнювання по вертикалі */
padding-left: 5px; /* Відстань від тексту до картинки */
}
</style>
</head>
<body> <p><a href="image/xxx.jpg">Звичайне посилання на картинку</a></p> <p><a href="image/xxx.jpg" download>Ця ж картинка для скачування</a></p>
</body>
</html>Результат цього прикладу показаний на рис. 1.
