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

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 .

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.

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.

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;

}

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

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

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

Você pode usar a zoompropriedade Verifique este jsfiddle

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

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

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.

content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;