Need to remove href values when printing in Chrome

298
votes

I'm attempting to customize the print CSS, and finding that it prints links out with the href value as well as the link.

This is in Chrome.

For this HTML:

<a href="http://www.google.com">Google</a>

It prints:

Google (http://www.google.com)

And I want it to print:

Google
7
cssprintinghyperlinkprint-css
Keep in mind WHY every major CSS framework does that - you can't click on paper! So if you're going to deactivate it you should add a list of links at the bottom, such as this: alistapart.com/article/improvingprint – Julix
That's true, but I think it's better to have control of when and where the link appears. For instance, in my links I want them to appear in the next line after the text, and without parentheses. So I just show the url in the text. – user4052054

7 Answers

610
votes

Bootstrap does the same thing (... as the selected answer below).

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

Just remove it from there, or override it in your own print stylesheet:

@media print {
  a[href]:after {
    content: none !important;
  }
}
40
votes

It doesn't. Somewhere in your print stylesheet, you must have this section of code:

a[href]::after {
    content: " (" attr(href) ")"
}

The only other possibility is you have an extension doing it for you.

28
votes

@media print {
   a[href]:after {
      display: none;
      visibility: hidden;
   }
}

Work's perfect.

10
votes

If you use the following CSS

<link href="~/Content/common/bootstrap.css" rel="stylesheet" type="text/css"    />
<link href="~/Content/common/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/common/site.css" rel="stylesheet" type="text/css" />

just change it into the following style by adding media="screen"

<link href="~/Content/common/bootstrap.css" rel="stylesheet" **media="screen"** type="text/css" />
<link href="~/Content/common/bootstrap.min.css" rel="stylesheet" **media="screen"** type="text/css" />
<link href="~/Content/common/site.css" rel="stylesheet" **media="screen"** type="text/css" />

I think it will work.

the former answers like 

    @media print {
  a[href]:after {
    content: none !important;
  }
}

were not worked well in the chrome browse.

5
votes

I encountered a similar problem only with a nested img in my anchor:

<a href="some/link">
   <img src="some/src">
</a>

When I applied 

@media print {
   a[href]:after {
      content: none !important;
   }
}

I lost my img and the entire anchor width for some reason, so instead I used:

@media print {
   a[href]:after {
      visibility: hidden;
   }
}

which worked perfectly.

Bonus tip: inspect print preview

2
votes

To hide Page url .

use media="print" in style tage example :

<style type="text/css" media="print">
            @page {
                size: auto;   /* auto is the initial value */
                margin: 0;  /* this affects the margin in the printer settings */
            }
            @page { size: portrait; }
</style>

If you want to remove links : 

@media print {
   a[href]:after {
      visibility: hidden !important;
   }
}
0
votes

For normal users. Open the inspect window of current page. And type in:

l = document.getElementsByTagName("a");
for (var i =0; i<l.length; i++) {
    l[i].href = "";
}

Then you shall not see the url links in print preview.