<main>
  <h2>Adding PDF Text to PDF Links with CSS</h2>
  
  <p>Take note of the two links shown on this page. This is an example sentence that points to <a href="https://www.ecma-international.org/wp-content/uploads/ECMA-262_8th_edition_june_2017.pdf">a document for the ECMASCript specification</a>. That link points to a PDF, which is indicated by the PDF text next to it. Other links, <a href="https://tc39.es/ecma262/">like this one</a> won't have the PDF text.</p>

</main>
body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
}

a, a:visited {
  color: blue;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

p {
  text-align: left;
  padding: 0 20px;
}

code {
  color: firebrick;
}

a[href$=".pdf"]:after {
  content: " (PDF)";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.