Eliminate any hyperlink mentions from the Media Print Screen

I'm experiencing a small issue where I am unable to remove the link reference from the print view.

Below is the HTML code snippet:

<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 in my header.php file for media queries:

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

Here is a snapshot of how it looks in normal HTML View:

And here is the Media Print Vision:

In the print view, there are visible link references. Is there a way to remove this using CSS?

I have attempted using display: none and visibility: hidden, but that hides the entire link text as well.

htmlcss

Answer №1

@media screen {
  a[href]:after {
    display: none !important;
  }
}

Attempt to negate the effects of your print media with the given CSS.

Answer №2

Website Link: Click Here

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

Include this new span above the TD element.

[PLEASE NOTE: ASSIGN THE CLASS "printonly" TO THE NEW <td> FOR PRINTING PURPOSES ONLY.]

We will conceal the following TD during printing using the provided CSS:

[PLEASE NOTE: APPLY THE CLASS "withoutprint" TO YOUR <td>]

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

CSS Styling

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

Answer №3

It appears that these hyperlinks have been inserted by the CSS of your website. It seems likely that you are using a pre-designed theme or boilerplate.

I recommend reviewing the print styling within these CSS files.

You may need to search for code similar to this:

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

If you find it, consider removing that particular piece of code.

Answer №4

Check out this alternative method:

CSS Solution:

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

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

SEE DEMO

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The fix for the unresponsive fixed container in Angular 2 Material

I've encountered an issue with CSS and Angular 2 material. Any element with a fixed position doesn't behave as expected inside an md-sidenav-container. However, when it is placed outside the container, it works perfectly. I have created a Plunker ...

cssangularangular-material

Does anyone know if it's achievable to include a background position within the img /asp:image tag?

Currently, I am endeavoring to enhance the loading speed of my webpage. The initial approach I decided to pursue is base64 conversion. On my homepage, there are a total of 18 small images that need to be loaded. Since base64 encoding increases image size ...

c#htmlcssasp.netimage

What is the best way to duplicate a CSS shape across a horizontal axis?

I am working on decorating the bottom of my page with a repeated triangle design. The image provided only displays one triangle, but I would like to extend it across the entire horizontal div. Here is a screenshot of my progress so far: https://i.stack.im ...

htmlcssrepeatcss-shapes

"Exploring the Functionality of Page Scrolling with

Utilizing Codeigniter / PHP along with this Bootstrap template. The template comes with a feature that allows for page scrolling on the homepage. I have a header.php template set up to display the main navigation across all pages. This is the code for th ...

javascriptphpjqueryhtmlcss

Using React to Dynamically Display JSON Data as HTML

Struggling to incorporate HTML rendering from JSON data into my React component without relying on dangerouslySetInnerHTML. I want to include other React components within the rendered HTML, but facing challenges when trying to render multiple elements or ...

javascripthtmljsonreactjs

Is it possible to include additional details in a hyperlink so that clicking on it automatically populates the forms on the webpage?

Every day, I have to click on a link and input some information (username, password, code). Is there any way to modify the link so that it automatically fills in my account details when clicked? <input type="text" name="u" tabindex="1" size="15" id=usr ...

phphtmlsql

What is the best way to align an image in the middle of an image slider within a Bootstrap

Struggling to align the image properly in a Bootstrap 5 image slider carousel: https://i.sstatic.net/upPza.png <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <div class=&qu ...

htmlcssbootstrap-5

When I click on the button, the page reloads instead of executing the essential code

On my website, there is a settings page where users can edit their profiles. After editing, they click the update button which triggers the updateProfileData function. This works smoothly in Chrome browser, but in Firefox, the page reloads as soon as the b ...

javascriptjqueryhtmlcssfirefox

Apply a style to the div element that contains a TextInput component

As a beginner in the world of React and Material UI, I am currently working with Material UI version "1.0.0-beta.17", React 15.6.2, styled-components 2.0.0, and styled-components-breakpoint 1.0.1. Within a div element, I have two TextInput fields. const ...

javascriptcssreactjsmaterial-uistyled-components

Having trouble with spawning child processes asynchronously in JavaScript

I'm trying to figure out how to format this code so that when a user clicks a button, new input fields and redirect buttons are asynchronously inserted into the unordered list. Everything was working fine until I added the redirect button insertion fu ...

javascripthtml

The problem with floating labels

I have been attempting to incorporate the floatlabels feature from floatlabels, but I am encountering difficulties in getting it to work properly. Here is the sequence of steps I have taken: Firstly, I include the JS file <script src="js/floatlabels. ...

jqueryhtmlcssforms

Unusual phenomenon in ASP.NET: Adding Debug=true in the web.config file results in CSS modifications

As the question suggests: After including debug=true in my web.config file (without making any other alterations to the code), my page is displayed without a background color. Can anyone shed light on why this might be happening? ...

cssasp.netdebuggingweb-config

Ways to align content in the center using Vuetify3

I have a component positioned at the top of the page, but I would like it to be centered instead. https://i.sstatic.net/wSFBP.png Something like this: https://i.sstatic.net/rfqAB.png Here is my current code: <template> <v-container class=" ...

cssvue.jssassvue-componentvuetify.js

The username index is not defined in the file path C:xampphtdocsAppX1signin.php on line 6

Experiencing some challenges with a php script I recently created. As a beginner in php, I understand that my code may not be optimal. These error messages are displayed when the form is submitted: Notice: Undefined index: username in C:\xampp&bsol ...

javascriptphphtmlmysql

Tips for perfectly centering a light box and concealing a scrollbar

Hello, I'm a web designer and facing an issue with the alignment of my lightbox. The lightbox is not center aligned on any resolution, which is causing some trouble. I have also added a black overlay for transparency in the background, but it's s ...

jqueryhtmlcss

Tips for embedding HTML code within {{ }} in Django templates

I'm curious about how to incorporate HTML within {{ }}: {{ article.tags.all|join:", " }} This code snippet returns tags separated by commas, for example: sports, cricket, nature, etc. What I would like to achieve is: {{ <span class="label"&g ...

pythonhtmldjangomodel

Achieve the highest character count possible within HTML elements

Is it possible for a standard HTML element with defined width and height to manage characters using JavaScript, as shown in the code snippet below? <div id="text-habdler-with-width-and-height" ></div> <script> $("element& ...

javascripthtmlcss

Utilize an Ajax function to call the BOT listening URL within a Web method

My recently developed web application features a submit button that triggers an Ajax call to communicate with the BOT. The code snippet used for the Ajax function is as follows: <script> $(document).ready(function () { $("#btnSend& ...

c#htmlasp.netajaxbotframework

Ways to determine the success of $wpdb->query and retrieve the outcome

Currently, I am in the process of developing a WordPress website, I have implemented a form that allows users to make modifications and update the database: Below is the HTML/PHP code snippet: echo '<form class="form-verifdoc" target=&q ...

javascriptphphtmlwordpress

Retrieve specific form data with the help of jQuery

In a unique situation, I am dealing with a webpage that contains multiple forms and I am attempting to retrieve the data submitted in each form. Here is an example of the HTML code: <form name="form1"> <input type="text"> <input ty ...

jqueryhtmlforms