1

Meu blog mostra os links quando impressos através do a[href]:after { content:" (" attr(href) ")"; }, entretanto não quero que ele mostre os links de imagens, visto que eu as retirei também do CSS para impressão. Há alguma forma de remover esses links através de algo como o a[href]:after { content:" (" attr(href) ")"; } que mencionei (como, por exemplo, ignorar algo que termine com .jpg ou .png, suponho...)?

Exemplo:

O código aparece, basicamente, assim (um texto seguido de uma imagem):

<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>

Quando impresso, sai assim: 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.

(https://4.bp.blogspot.com/-ipbE_b01j_A/Wp_Xj93YDrI/AAAAAAAAE64/hUZW_VqNjpMbL9BanqgF1Db8paRdblYPgCLcBGAs/s320/a-constancia-e-mais.jpg)

A imagem sai em forma de URL porque está configurado assim, mediante o código a[href]:after { content:" (" attr(href) ")"; }. Meu problema é que quero, sim, que os links sejam impressos, exceto os links de imagem.

2 Respostas 2

1

Vítor isso vai resolver seu problema.

Essa regra vai pegar os termo jpg, png ou gif dentro do link e vai colocar o contente como vazio. Então se no link houver os caracteres jpg etc ele vai aplicar a regra.

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

Veja o exemplo:

@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>

2
  • Obrigado, @hugocsl Funcionou perfeitamente, cara! Deus te abençoe! ;D
    – winiercape
    Commented 17/04/2018 às 14:34
  • @Vítor Que bom que resolver assim jovem! Com classe tb resolveria, o problema seria colocar classe em 1.000 imagens por exemplo. []´s
    – hugocsl
    Commented 17/04/2018 às 14:36
1

Vitor, pelo que entendi você não vai conseguir fazer isso somente com CSS. Você precisa verificar se a url é uma imagem ou não.

Uma sugestão é adicionar via JS uma class nos elementos onde a url é uma imagem.

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

E com o CSS você remove o content

 @media print { a.url-img[href]:after { content:"" }
2
  • eu aceitei a resposta do Hugo, mas, ainda assim, obrigado pela colaboração, cara! Deus te abençoe!
    – winiercape
    Commented 17/04/2018 às 14:35
  • Não seja por isso, a resposta do @hugocsl é melhor mesmo =) Commented 17/04/2018 às 14:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .