<main>
  <h2>Include URLs in a Print Stylesheet</h2>
   <p>Try printing this page (or just do a print preview). Notice the URLs for the links will appear in the printed page, but not on the live page itself.</p>
  <p class="purls">Visit <a href="https://www.codeinwp.com/" target="_blank">CodeinWP</a> for content to help you build better websites. You can try out the <a href="https://www.codeinwp.com/blog/wordpress-cheat-sheets-web-development-design/" target="_blank">cheat sheets</a> or even the <a href="https://www.codeinwp.com/blog/category/wordpress-comics/" target="_blank">tech comics</a>.</p>
  
  <p>Use the button below to toggle the URLs to see what it will look like when they are printed.</p>
  
  <button>Toggle URLs</button>

</main>

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

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

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

code {
  color: firebrick;
}

a {
  color: firebrick;
}

a:hover {
  color: navy;
}

.viewurls a::after {
  content: " (" attr(href) ")";
}

@media print {
  a::after {
    content: " (" attr(href) ")";
  }
}

let purls = document.querySelector('.purls'),
    btn = document.querySelector('button');

btn.addEventListener('click', function () {
  purls.classList.toggle('viewurls');
}, false);