If you want to hide the actual href
link when printing a webpage (for example, when you have links displayed as "Click here (https://example.com)" and you want to hide the "https://example.com" part in the printout), you can use a combination of CSS and JavaScript.
Here's a step-by-step guide:
Using JavaScript to Add a Data Attribute:
First, you can use JavaScript to add a data attribute to each link that stores its href
value. This way, you can later target it with CSS.
document.querySelectorAll('a').forEach(link => {
link.setAttribute('data-href', link.href);
});
Using CSS for Print:
Then, in your CSS, you can use a pseudo-element to display the href
value and hide it when printing.
/* Display href value for screen */
a::after {
content: " (" attr(data-href) ")";
}
/* Hide href value when printing */
@media print {
a::after {
content: "";
}
}
With this approach, the href
value will be displayed on the screen but will be hidden when the page is printed.