2

My page contains several images:

<a class="fancybox" href="img/16.jpg"><img src="img/16.jpg" class="center-block img-responsive"></a>

When I print my page (chrome), the href is visible at the bottom of each image.

So, how to hide the action link printed at the bottom of each image, please?

When I apply, by example, the class 'hidden-print' to the action block then my image disappeared...

PeterMacGonagan
  • 55
  • 8

3 Answers3

2

I can not reproduce the problem on chrome, so i guess its not because of anchor tag. And as Jackson already said, you might have, 

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

in any of your css framework if you have used.

if you're using Twitter Bootstrap as a framework, this will work for you(from https://stackoverflow.com/a/14931127/3556874):

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

If you are not sure , where is it written or if you can not change the external css, you will also require to consider the :before pseudo class

@media print{

 a[href]:after{
        content:"";
    }
 a[href]:before{
        content:"";
    }

}
Community
  • 1
  • 1
Naeem Shaikh
  • 15,331
  • 6
  • 50
  • 88
1

It's common to include a print.css file which is used when the webpage is printed. This file probably contains a style for all anchor tags to output the href after the link.

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Inside the css file you might find a style value for the a tag like this:

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

Removing this style might fix your problem.

Hope this helps

Jackson
  • 3,476
  • 1
  • 19
  • 29
0
@media print {
     .fancybox {
         color: transparent;
     }
}

Media will only trigger on printing a page.
Transprent color will ofcource not be printed.

Persijn
  • 14,624
  • 3
  • 43
  • 72