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:
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;
}