Posso alterar a altura de uma imagem em CSS: before /: after pseudo-elements?


251

Suponha que eu queira decorar links para certos tipos de arquivo usando uma imagem. Eu poderia declarar meus links como

<a href='foo.pdf' class='pdflink'>A File!</a>

então tem CSS como

.pdflink:after { content: url('/images/pdf.png') }

Agora, isso funciona muito bem, exceto se pdf.pngnão for do tamanho certo para o texto do meu link.

Gostaria de poder dizer ao navegador para dimensionar a :afterimagem, mas não consigo encontrar a sintaxe certa. Ou é como imagens de fundo, onde o redimensionamento simplesmente não é possível?

ETA: Estou inclinado a: a) redimensionar a imagem de origem para o tamanho "correto", do lado do servidor e / ou b) alterar a marcação para simplesmente fornecer uma tag IMG em linha. Eu estava tentando evitar essas duas coisas, mas elas parecem ser mais compatíveis do que tentar fazer coisas puramente com CSS. A resposta à minha pergunta inicial parece ser "você pode classificar de fazê-lo, às vezes".


1
Existe uma razão convincente para você não estar usando as tags 'img' com as tags 'a' envolvidas? Essa é a sintaxe mais típica para uma imagem que também é um link. Digo isso porque, mesmo que seu método funcione, você pode confundir outros desenvolvedores. O CSS também tem uma forte reputação de inconstância entre navegadores / versões.
precisa saber é

4
Agradeço a questão, mas não controlo necessariamente a geração de marcação - nesse caso, só posso mudar o estilo, não reestruturar.
Coderer

Respostas:


375

O ajuste background-sizeé permitido. No entanto, você ainda precisa especificar a largura e a altura do bloco.

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

Veja a tabela de compatibilidade completa no MDN .


3
Isso é ótimo, exceto que a maioria dos nossos clientes está no IE 7 ou 8 (absurdo corporativo, desculpe).
Coderer

14
Se for esse o caso, você não deveria estar usando :afternada. Não é suportado abaixo do IE8.
Ansel Santosa

24
Essa técnica também exigia configuração width: 10px; height: 20px;para ver a imagem.
aqui

5
Observe também que isso realmente funciona, mas apenas com a background-imagepropriedade específica , o simples backgroundnão funcionará.
Gruber

4
(Para :before) eu também precisava position: absolute, e left: -10px.
Hugo Hugo

95

Observe que o :afterpseudoelemento é uma caixa que, por sua vez, contém a imagem gerada. Não há como estilizar a imagem, mas você pode estilizar a caixa.

A seguir, é apenas uma idéia, e a solução acima é mais prática.

.pdflink:after {
    content: url('/images/pdf.png');
    transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

Desvantagens: você precisa conhecer as dimensões intrínsecas da imagem e isso deixa um espaço em branco, que não consigo me livrar do caixa eletrônico.


6
zoom: 0,5 também vale a pena considerar.
11743 Alex

Gosto da ideia dessa solução, mas ela descarta o posicionamento, especialmente em um cenário de bloco embutido. (IE 11)
Christopher Davies

1
o zoom não é bem suportado.

1
o jsfiddle não está alterando o tamanho. Estou usando o Firefox mais recente. Também tentei o último exemplo do jsfiddle neste post usando o zoom, e também não funciona.
19716 Ryan

1
Apenas uma observação: no meu caso, eu tive que colocar position: absolutepara transform: scale(0.5)poder realmente trabalhar. Eu também tive que colocar position: relativeo elemento "pai" (o dono do :afterpseudo) por sanidade. Além disso, tive que adicionar translate(-16px, -16px)à minha transformação para posicionar o ícone 16x16 corretamente. Isso position: absolutetambém tem o benefício de eliminar o problema de espaço em branco.
Braden Best

34

Como minha outra resposta obviamente não foi bem compreendida, aqui está uma segunda tentativa:

Existem duas abordagens para responder à pergunta.

Prático (apenas me mostre a maldita foto!)

Esqueça o :afterpseudo-seletor e escolha algo como

.pdflink {
    min-height: 20px;
    padding-right: 10px;
    background-position: right bottom;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

Teórico

A pergunta é: você pode estilizar o conteúdo gerado ? A resposta é: não, você não pode. Houve uma longa discussão na lista de discussão do W3C sobre esse assunto, mas nenhuma solução até agora.

O conteúdo gerado é renderizado em uma caixa gerada e você pode estilizar essa caixa, mas não o conteúdo como tal . Navegadores diferentes mostram um comportamento muito diferente

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}  
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}

O Chrome redimensiona o primeiro, mas usa as dimensões intrínsecas da imagem para o segundo

Firefox e, por exemplo, não suportam o primeiro e usam dimensões intrínsecas para o segundo

opera usa dimensões intrínsecas para ambos os casos

(em http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html )

Da mesma forma, os navegadores mostram resultados muito diferentes em coisas como http://jsfiddle.net/Nwupm/1/ , onde mais de um elemento é gerado. Lembre-se de que o CSS3 ainda está no estágio inicial de desenvolvimento e esse problema ainda não foi resolvido.


1
@TJ Cada resposta separada merece uma resposta (se isso não for óbvio o suficiente), que receberá diferentes quantidades de votos e será visto / citado / compartilhado de maneira diferente com base no conteúdo da resposta.
Timo Huovinen

13

Você deve usar o fundo em vez da imagem.

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}

6

diplay: block; não tem nenhum efeito

positionin também funciona de maneira muito estranha para os fundamentos de front-end, portanto, tenha cuidado

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}

4

Aqui está outra solução (funcional): redimensione suas imagens para o tamanho desejado :)

.pdflink:after {
    display: block;
    width: 20px;
    height: 10px;
    content:url('/images/pdf.png');
}

você precisa que pdf.png tenha 20px * 10px para que isso funcione. Os 20px / 10px no css estão aqui para fornecer o tamanho do bloco, de modo que os elementos que vêm depois do bloco não sejam todos bagunçados com a imagem

Não se esqueça de manter uma cópia da imagem não processada no tamanho original


É piadas!
MD Ashik

3
.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    width: 10px; 
    height: 20px;
    padding-left: 10px;// equal to width of image.
    margin-left:5px;// to add some space for better look
    content:"";
}

2

Você pode usar a zoompropriedade Verifique este jsfiddle


1
Verificando o jsfiddle, ambos têm o mesmo tamanho e o zoom é destacado em vermelho.
19716 Ryan

Não é redimensionado no Firefox 53 no momento. Felizmente, isso pode ser implementado em uma versão posterior do Firefox. É bom saber que ele funciona no Chrome pelo menos. :-)
Ryan

2

Você pode alterar a altura ou a largura do elemento Antes ou Depois da seguinte maneira:

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}

1

Eu usei essa largura de controle de tamanho de fonte

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}

1

Atualmente, com o flexbox, você pode simplificar bastante seu código e ajustar apenas 1 parâmetro conforme necessário:

.pdflink:after {
    content: url('/images/pdf.png');
    display: inline-flex;
    width: 10px;
}

Agora você pode simplesmente ajustar a largura do elemento e a altura será ajustada automaticamente, aumentar / diminuir a largura até que a altura do elemento esteja no número necessário.


1
Não funcionou para mim, talvez porque a imagem seja svg, talvez porque o pai seja um contêiner flexível.
Miguel Pynto

não em um url(//placeimg.com/800/200/arch)
arquivo

0
content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.