<h2>Adding a PDF Icon 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 icon next to it. Other links, <a href="https://tc39.es/ecma262/">like this one</a> won't have the PDF icon.</p>

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: url(https://www.codeinwp.com/wp-content/uploads/2021/12/pdficon.png);
  vertical-align: middle;
  margin-left: 6px;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.