Omit link URLs from the output of browser's print() functionality

browser, css, printing

Solution

Here is an example for the way to manipulate the styling of `<a href=...>` tags inside a CSS file to make it appear as you dislike it:

@media print {
  ##....
  a[href]:after {
     content:" ("attr(href)")";
     color:#868686;
     background-color:inherit;
     font-style:italic;
     size:90%;
  }
  ##....
}

To override this setting (and make it appear more to your liking), you may need to use a (user) print.css which contains the following (as part of its total content):

a[href]:after {
   content:"" !important;
}

Your question is not very clear about the scope of your requirement:

- Should it be valid just for a website you control and for the users visiting it?

- Should it apply to any web page you visit?

If you want the first, you put the reference to your print.css into the HTML header section the usual way and host the file on your web server

If you want the second, you should google for "user stylesheets" to find links like the following:

- Accessibility Features of CSS: User override of styles

- Tap the power of Mozilla's user style sheets

- How to write a user stylesheet for Safari

Problem

Some modern browsers convert links like ``` <a href="http://somesite.com">Site</a> ``` into ``` Site (http://somesite.com) ``` as part of the generated PDF. Is there a way to omit the links from the generated PDF version by pure CSS? Which CSS classes in the print.css must be defined in order to suppress the link URLs?

Original source