How to Remove Href Values from Chrome Print Output?

Removing Href Values in Chrome Print Output

When customizing print CSS in Chrome, you may encounter an issue where links are printed with both the textual content and the href value. To resolve this, follow these steps:

For reference, here's the initial HTML:

<a href="http://www.google.com">Google</a>

Bootstrap's Default Behavior:

Bootstrap includes a print stylesheet that appends the href value to links in parentheses:

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

Disabling or Overriding Bootstrap's Style:

To remove the href values, you can either modify Bootstrap's print stylesheet or override it in your own:

Disabling Bootstrap's Style:

Remove the a[href]:after rule from Bootstrap's print stylesheet.

Overriding the Style:

Add a new a[href]:after rule to your own print stylesheet and set content: none !important; to disable Bootstrap's styling:

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

After implementing these changes, links will print only the textual content, as desired:

Google

The above is the detailed content of How to Remove Href Values from Chrome Print Output?. For more information, please follow other related articles on the PHP Chinese website!