Remove href from printed page without changing style

Question

I have a problem with the fact that, when I try to print a page, every link gets the URL between () behind it. I have found multiple questions here, and the solutions work. I have one other problem, on top of that, though: My styles in print.css seem to be ignored after adding a solution.

My CSS

.header-breadcrumb {
    margin-top: 0 !important;
}

.nonPrint, hr, .shows-more, #videoGallery{
    display: none;
}

.single-event .container .col-md-9 {
    width: 70%;
    float: left;
}

.single-event .container .col-md-3 {
    width: 30%;
    float: left;
}

.single-calendar .table-responsive table tbody tr td {
    padding: 2px 5px;
}

.single-description {
    font-size: 10pt !important;
}

h1 {
    font-size: 12pt !important;
}

.printLogo {
    display: block !important;
    width: 200px;
    padding-left: 10px;
}

But when I add

a:after {  
      display: none;
      content: "";    
}

the font-sizes get ignored and jumps back to their original values (or so it seems). How do I fix this?

On the left you see the file as it should look like (including a link in the sidebar on the right, which has to be removed), and on the right you see the file with the href removed, but where the all new styles in print.css seem to be ignored.

You want to remove the `( [href] )` from **every** link in the print version? — t.niese, Nov 11 '15 at 12:16
In my example, there's only one at the moment, but yes, in theory I don't want to show the `href` of any link. — Rvervuurt, Nov 11 '15 at 12:17
Is this your page that you want to change or do you create a _print_ style-sheet for a foreign site where you don't have access to the css file directly? — t.niese, Nov 11 '15 at 12:21
Well if you want to change the css so that every visitor does not have those `()` then you should remove the rule `a[href]:after { content: " (" attr(href) ")"; }`, if you just want to change it for your printing with an extension, then you have to make sure that your custom style sheet is loaded after the one of the page and add `a[href]:after { content:none; }`. I tested that with the _stylebot_ extension on _teaterbilletter.dk_ and it worked fine. — t.niese, Nov 11 '15 at 12:32
Let me say it again: All the CSS you see above works and creates the file on the left. As soon as I add `a[href]:after { content:none; }` (either in the top of `print.css`, the bottom of `print.css` or in the main css file), it seems ignored. Try adding the CSS with stylebot, make a pdf, then add the `a`-stuff and make another pdf. Can you see the difference in font-size, padding, logo-size etc.? — Rvervuurt, Nov 11 '15 at 12:38

Rvervuurt · Answer 1 · 2015-11-11T13:11:20.140

Disregard what I said before. The difference in styling came from the following:

Because of this CSS, the sidebar has to fill 30%:

.single-event .container .col-md-3 {
    width: 30%;
    float: left;
}

But since it output a URL which could not be broken until the first -, being 30% wide meant resizing the font (which Chrome did automatically). Hiding the URL made it possible to actually apply the font-size I tried to apply through the CSS, making everything bigger than in the original file, where it actually DIDN'T listen to the CSS.

Facepalm

This might be useful in the future for 2 other people, so I'll leave the question here.

Remove href from printed page without changing style

1 Answers1