Adding Href Attribute Value after Link for Print Style

There is general style convention people follow for links in print style CSS. In print style css, we add href value of link just after <a> tag so that on print paper, link look like below:


instead of below:

Syntax Highlighter

Above link is having href but on printed paper, the link cannot be seen.

But the problem was that I do not want to show href value for link having image. Many times we link images as well like this:

<a><img /></a>

Tried with different combination of CSS using :not() and various others like :first-child etc but it is not possible it seems. Googled for it to get answer without success. Finally managed with little JavaScript and custom CSS.

// Add a class to links after which there is no img
jQuery("[itemprop=articleBody] a:has(img)").addClass("img-link");

Instead of the following commonly used CSS

p a:after {
 content: " (" attr(href) ")";
 font-size: 80%;

I used:

p a:not(.img-link):after {
     content: " (" attr(href) ")";
     font-size: 10pt;

More on Print StyleSheet:

Older post related to Print CSS