Remove URL from printing page using css

Question

<body>
 <div class="print-logo">
  <img class="print-logo img-responsive" id="logo" src="http://logo.png" alt="image" /></div>
    <div class="print-site_name">Published on <em class="placeholder">website name</em> (<a href="http://localhost">http://localhost</a>)</div>
<p />
<div class="print-breadcrumb"><a href="/">Home</a> Reportedly Prepping </div>
<hr class="print-hr" />
    <div class="print-content"><article id="node-ID" class="node node-blog clearfix">   
<div class="bd-headline left"> some title  </div>    
<div class="item-body">
 <p dir="ltr"><span id="docs-internal-guid-???">    
  <img alt="Core" height="366" src="http://image.png" width="645" />  
   <span> contributor helping  report. It’s the latest nightmare.</span><a href="http://url-to-be-removed">some text for the url to be removed(http://url-to-be-removed) then some more text.  
 </p>   
 <p> some more text and another url</p>
</div>   
...

Using CSS how can remove the URL. Since the URL are in the body I tried using the class name and html tag :

div.print-content article.node .node-blog .clearfix div.item-body p a { content: "";}

update
The part i want to remove is in bold.
contributor helping report. It’s the latest nightmare.some text for the url to be removed (http://url-to-be-removed) then some more text.

Possible duplicate of [Need to remove href values when printing in Chrome](https://stackoverflow.com/questions/7301989/need-to-remove-href-values-when-printing-in-chrome) — bvpb, Jun 06 '17 at 05:43

score 1 · Answer 1 · answered Oct 06 '16 at 20:45

1

To remove the URL from a printed media, use:

@media print {
  div.print-content article.node .node-blog .clearfix div.item-body p a {
    display: none;
}

If what you want instead is to have it dissapear completely (from any view), just add div.print-content article.node .node-blog .clearfix div.item-body p a { display: none; }

Adding it this way will remove it completely from the view of the doc, freeing up any space occupied by the <a> tag.

answered Oct 06 '16 at 20:45

Antonio Hernández

466
2
10

Thanks what i did is : `div.print-content article.node div.item-body p a { display: none; }` but it remove everything: the link and the url. I update my question and bolded the part that need to be removed which is the URL after the link in parenthesis. – mamesaye Oct 07 '16 at 16:01

mamesaye · Accepted Answer · 2016-10-08T20:58:01.710

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

update

The CSS :after selector inserts something after the content of each selected element(s).

Use the content property to specify the content to insert. content: none is for explicitly preventing the after selector (pseudo-element) from being generated (really only used to override another style that would have generated content).

a[href]:after { content: none !important; } will mean remove content after each link.

Remove URL from printing page using css

2 Answers2