Download attribute in CSS

Recipe 3.3 Create download links

Sample:

Download the sustainability report 2022 (PDF, 29MB)

Code:

<style>
   [download]::after {
    content: "";
    background: url('/images/demos/download.svg') no-repeat center;
    block-size: 1em;
    display: inline-block;
    inline-size: 1em;
  }
</style>

<p>
  <!-- Download link to a pdf -->
  <a href="/report.pdf" download>
    Download the sustainability report 2022 (PDF, 29MB)
  </a>
</p>