Remove links references from the Media Print Screen

Question

I' am having a small issue where I cannot remove the link reference from the print view.

This is what I can on my HTML side

<table style="width: 436px; height: 374px;" border="0" cellpadding="5">
    <tbody>
        <tr style="background-color: #edfbef;">
            <td><span style="color: #3366ff;"><a title="Electricity Tariffs and Rates" href="http://newfea.oceanic.net.fj/your-home/electricity-tariffs-and-rates/"><span style="color: #3366ff;"><strong>Electricity Tariff &amp; Rates</strong></span></a></span></td>
            <td>Find out how you are being charged for the power you use at home</td>
        </tr>
    </tbody>
</table>

This is what I have on my header.php page for media queries

<link href="<?php echo get_template_directory_uri(); ?>/resources/css/print.css" rel="stylesheet" media="print">

Here is a snapshot how it looks in normal HTML View

Here is the Media Print Vision enter image description here

You can see from the print view there are the link reference of the links. Is there a way I can remove this using CSS.

I have tried display: none, visibility: hidden, its doesn't because it hides the whole link text with it.

Similar question asked before. Better check this link. http://stackoverflow.com/questions/7301989/need-to-remove-href-values-when-printing-in-chrome — Kheema Pandey, Mar 05 '14 at 04:54

score 4 · Accepted Answer · answered Mar 05 '14 at 04:53

4

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

Try to override your print media by the above code.

answered Mar 05 '14 at 04:53

Kawinesh S K

3,148
1
16
29

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

REFERENCE LINK : HERE

<span class="printonly"><strong>Electricity Tariff &amp; Rates</strong></span>

ADD THIS NEW SPAN ABOVE TD.

[NOTE : ADDING CLASS "printonly" to NEW <td> for PRINT ONLY.]

WE WILL HIDE BELOW TD WHILE PRINTING USING ATTACHED CSS

[NOTE : ADDING CLASS "withoutprint" to your <td> ]

  <span class="withoutprint" style="color: #3366ff;">
     .....
       .....

CSS

.printonly{
    display:none;
}
    @media print {
    .withoutprint{
        display: none;
    }
    .printonly{
        display:block;
        color: red;
    }
}

score 1 · Answer 3 · answered Mar 05 '14 at 04:53

These links are placed there by your stylesheet. I am guessing you have used a theme or boilerplate.

Check the print styling in these stylesheets.

You are looking for something like this:

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

You would want to remove that.

score 1 · Answer 4 · answered Mar 05 '14 at 05:00

1

Try like this:

CSS:

@media only print {
    a { text-decoration: none; color: black; cursor: default; }
}

@media only screen {
    a { cursor: pointer; }
}

DEMO

answered Mar 05 '14 at 05:00

Ahsan Khurshid

9,383
1
33
51

Remove links references from the Media Print Screen

4 Answers4

[NOTE : ADDING CLASS "printonly" to NEW <td> for PRINT ONLY.]

[NOTE : ADDING CLASS "withoutprint" to your <td> ]

CSS