Need to remove href values when printing in Chrome

Question

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

Solution 1

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;
  }
}

Solution 2

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.

Solution 3

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

Work's perfect.

Solution 4

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.

Solution 5

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

View more solutions

Comments

[Julix]

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

[user4052054]

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.

[William Entriken]

<style>@media print{a[href]:after{content:none}}</style> Mostly posting for myself when I keep coming back to this page, thank you

[spasticninja]

Apparently Foundation does the samething too.

[forX]

I got it in zurb foundation css.

[ADTC]

Looks like HTML5 Boilerplate also does this! So I guess I have to override it through code change on my own website, and through Inspector on other websites...

[Matstar]

Warning: We had issues where a table sometimes lost the last few rows when printing. Turned out that this rule was the culprit, or at least removing it fixed the issue. Do not know why it had that effect.

[Matstar]

After digging more, I don't think that this was the only factor. While removing it fixed the issue, removing it AND all of Bootstrap print reintroduced the issue…

[Andrew]

@HenrikN - i think that's related to bootstrap columns floating. using float:none where necessary fixed a similar issue for me a few weeks back; might help you, but that's a different issue

[Paddymac]

This is a good solution if you have no control over the source code of the page you are trying to print.

[Marcos Buarque]

You should use display: none !important; if you want to get rid of the space the URL would occupy on the page.