Remove links from CSS images in @media print

Navigation
1

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

Example:

The code basically looks like 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 looks like this:  3. Diligence to strive; put a force greater than you have. Do not stand still, fix and provide.

/ p>

The image exits as a URL because it is configured like this, using the code a[href]:after { content:" (" attr(href) ")"; } . My problem is that I do want links to be printed, except for image links .

    
asked by anonymous 17.04.2018 / 14:49

2 answers

1

Vitor this will solve your problem.

This rule will take the term jpg , png or gif within the link and will put the content as empty. So if on the link there are the jpg characters etc it will apply the rule. 

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

See 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>
    
17.04.2018 / 15:28
1

Vitor, so I understand you will not be able to do this with just 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="#">#
17.04.2018 / 15:26
Regular expression for numbers, commas and periods PartialView not loading in select2 pattern