CODEWITHSUNDEEP
htmlcssprinting
mamesaye
mamesaye

Reputation: 2153

Remove URL from printing page using css

<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.

Upvotes: 0

Views: 9583

Answers (2)

mamesaye
mamesaye

Reputation: 2153

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.

Upvotes: 0

Antonio Hern&#225;ndez
Antonio Hern&#225;ndez

Reputation: 466

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.

Upvotes: 1

Related Questions