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

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: https://alistapart.com/article/improvingprint — Julix, Feb 23 '17 at 08:10
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, Mar 12 '18 at 18:00

Alex Ghiculescu · Answer 1 · 2014-09-18T04:40:36.133

624

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

edited Sep 18 '14 at 04:40

answered Feb 18 '13 at 07:08

Alex Ghiculescu

7,522
3
25
41

18

`` Mostly posting for myself when I keep coming back to this page, thank you – William Entriken Dec 04 '14 at 16:43
1

Apparently Foundation does the samething too. – spasticninja Oct 16 '15 at 17:02
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... – ADTC Nov 01 '16 at 11:28
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. – Henrik N Mar 29 '17 at 07:44
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… – Henrik N Mar 29 '17 at 08:00
1

@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 – Andrew Apr 18 '17 at 19:06

score 41 · Answer 2 · answered Sep 04 '11 at 20:46

41

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.

answered Sep 04 '11 at 20:46

Eric

95,302
53
242
374

1

I got it in zurb foundation css. – forX Feb 08 '16 at 19:08

score 29 · Answer 3 · answered Feb 10 '18 at 15:35

29

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

Work's perfect.

answered Feb 10 '18 at 15:35

JELEWA.de

291
3
3

Wang Jijun · Answer 4 · 2016-12-28T01:44:52.703

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.

score 5 · Answer 5 · edited Jan 17 '18 at 18:09

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

score 3 · Answer 6 · answered Dec 17 '19 at 23:00

3

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

answered Dec 17 '19 at 23:00

Abd Abughazaleh

4,615
3
44
53

1

You should use `display: none !important;` if you want to get rid of the space the URL would occupy on the page. – Marcos Buarque Jul 07 '20 at 15:17

score 0 · Answer 7 · answered Jan 30 '18 at 07:50

0

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.

answered Jan 30 '18 at 07:50

Wen Xin

29

This is a good solution if you have no control over the source code of the page you are trying to print. – Paddymac Nov 11 '19 at 11:06

Need to remove href values when printing in Chrome

7 Answers7

Linked

Related