How to hide href attribute of <A> tag via css when using window.print

Question

I've a php page, with a button that able the user to print via window.print function.

I'd need to know how to hide the href attribute of an html tag when printing the page

Example: if the tag is like follow:

  <a href='myurl.com'>HELLO</a>

I want to display just HELLO.

I've to do this only when i use window.print.

I've already set up the css for printing in this way:

@media print {
  body * {
    visibility:hidden;
  }
  #section_to_print, #section_to_print * {
    visibility:visible;
  }

  #section_to_print {
    position:absolute;
    left:0;
    top:0;
  }

  /*
  //HERE I NEED A RULE TO HIDE
  // ONLY HREF ATTRIBUTE BUT NOT CONTENT OF A TAG
  //BUT IN THIS WAY THEY HIDE THE WHOLE TAG OF COURSE
  #section_to_print a {
    display:none;
  } 
 */

  @page { size: landscape; }
}

And all works correctly, except for the link that was printed with the href part.

Thank you

You want to prohibit navigation? Or you don't want to show href attribute in client? — Leri
– Leri, Commented Jul 12, 2013 at 10:53
@ user: It's not normal behavior for browsers to show the link's href when printing. Are you sure you're not doing something in the CSS that makes it happen? Something like what this answer describes for instance? If so, then of course the answer is, don't do that. :-) — T.J. Crowder
– T.J. Crowder, Commented Jul 12, 2013 at 10:59
Are you using Bootstrap? This has a reset file which adds the href value into the print CSS. — Astrotim
– Astrotim, Commented Jul 12, 2013 at 11:19

user2548436 · Accepted Answer · 2018-05-31 12:13:21Z

15

Thank you, the solution i've found that work form me is similar to your

   #section_to_print a[href]:after { display:none; }

In fact, the problem was generated by some css containing a rule like follow:

     a:link:after, a:visited:after {content:" (" attr(href) ")";font-size:90%;}

Like suggested at this link:

stackoverflow.com/questions/4834517/…

However, thank to much :) Regards

edited May 31, 2018 at 12:13

answered Jul 18, 2013 at 7:47

user2548436

9353 gold badges16 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TheScarecrow · Accepted Answer · 2013-07-12 10:56:07Z

-3

why dont you use:

#section_to_print a{
    color:black;
    text-decoration:none;
}

answered Jul 12, 2013 at 10:56

TheScarecrow

1631 silver badge9 bronze badges

2 Comments

user2548436 Over a year ago

Thank you, the solution i've found that work form me is similar to your #section_to_print a[href]:after { display:none; } In fact, the problem was generated by some css containing a rule like follow: a:link:after, a:visited:after {content:" (" attr(href) ")";font-size:90%;} Like suggested at this link: stackoverflow.com/questions/4834517/… However, thank to much :) Regards, Francesco

user2548436 Over a year ago

How to set post as SOLVED ?

Collectives™ on Stack Overflow

How to hide href attribute of <A> tag via css when using window.print

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related