Remove CSS image links in @media print

Question

My blog shows the links when printed through a[href]:after { content:" (" attr(href) ")"; }, however I don’t want it to show the image links, since I also removed them from the CSS for printing. Is there any way to remove these links through something like the a[href]:after { content:" (" attr(href) ")"; } that I mentioned (such as ignoring something that ends with . jpg or . png, I suppose...)?

Example:

The code appears basically like this (a text followed by an image):

<span>3. Diligência para se esforçar; pôr uma
força maior do que a que se tem. Não fique parado, zele e proveja.</span>

<a href="https://4.bp.blogspot.com/-ipbE_b01j_A/Wp_Xj93YDrI/AAAAAAAAE64/hUZW_VqNjpMbL9BanqgF1Db8paRdblYPgCLcBGAs/s1600/a-constancia-e-mais.jpg"><img alt="constância mais importante que a intensidade" src="https://4.bp.blogspot.com/-ipbE_b01j_A/Wp_Xj93YDrI/AAAAAAAAE64/hUZW_VqNjpMbL9BanqgF1Db8paRdblYPgCLcBGAs/s320/a-constancia-e-mais.jpg" title="Seja intenso, contudo constante!"/></a>

When printed, it comes out like this: 3. Diligence to exert oneself; to place a force greater than one has. Do not stand still, watch and provide.

(https://4.bp.blogspot.com/-ipbE_b01j_A/Wp_xj93ydri/AAAAAAAAAAE64/hUZW_VqNjpMbL9BanqgF1Db8paRdblYPgCLcBGAs/S320/a-constancia-E-mais.jpg)

The image comes out in URL form because it is configured like this, through the code a[href]:after { content:" (" attr(href) ")"; }. My problem is that yes, I want the links to be printed, except the image links.

Answer 1

Vitor, from what I understand you won’t be able to do this only with CSS. You need to check whether the url is an image or not.

A suggestion is to add via JS a class in the elements where the url is an image.

 <a class"url-img" href="https://4.bp.blogspot.com/-ipbE_b01j_A/Wp_Xj93...

And with CSS you remove content

 @media print { a.url-img[href]:after { content:"" }

Answer 2

Victor this will solve your problem.

That rule will catch the term jpg, png or gif inside the link and will put content as empty. So if there are jpg characters in the link etc it will apply the rule.

a[href*=".jpg"]:after,
a[href*=".png"]:after,
a[href*=".gif"]:after { content:""; }

Take the example:

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

a[href*=".jpg"]:after, 
a[href*=".png"]:after, 
a[href*=".gif"]:after { content:""; }

img {display:none;}
}

<span>3. Diligência para se esforçar; pôr uma força maior do que a que se tem. Não fique parado, zele e proveja.</span>
                
    <a href="https://4.bp.blogspot.com/-ipbE_b01j_A/Wp_Xj93YDrI/AAAAAAAAE64/hUZW_VqNjpMbL9BanqgF1Db8paRdblYPgCLcBGAs/s1600/a-constancia-e-mais.jpg">
        <img alt="constância mais importante que a intensidade" src="https://4.bp.blogspot.com/-ipbE_b01j_A/Wp_Xj93YDrI/AAAAAAAAE64/hUZW_VqNjpMbL9BanqgF1Db8paRdblYPgCLcBGAs/s320/a-constancia-e-mais.jpg" title="Seja intenso, contudo constante!"/>
    </a>

    <a href="https://4.bp.blogspot.com/-ipbE_b01j_A/Wp_Xj93YDrI/AAAAAAAAE64/hUZW_VqNjpMbL9BanqgF1Db8paRdblYPgCLcBGAs/s1600/a-constancia-e-mais.png">
        <img alt="constância mais importante que a intensidade" src="https://4.bp.blogspot.com/-ipbE_b01j_A/Wp_Xj93YDrI/AAAAAAAAE64/hUZW_VqNjpMbL9BanqgF1Db8paRdblYPgCLcBGAs/s320/a-constancia-e-mais.png" title="Seja intenso, contudo constante!"/>
    </a>
    <a href="https://4.bp.blogspot.com/-ipbE_b01j_A/Wp_Xj93YDrI/AAAAAAAAE64/hUZW_VqNjpMbL9BanqgF1Db8paRdblYPgCLcBGAs/s1600/a-constancia-e-mais.gif">
        <img alt="constância mais importante que a intensidade" src="https://4.bp.blogspot.com/-ipbE_b01j_A/Wp_Xj93YDrI/AAAAAAAAE64/hUZW_VqNjpMbL9BanqgF1Db8paRdblYPgCLcBGAs/s320/a-constancia-e-mais.gif" title="Seja intenso, contudo constante!"/>
    </a>