Supongamos que quiero decorar enlaces a ciertos tipos de archivos usando una imagen. Podría declarar mis enlaces como

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

entonces tener CSS como

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

Ahora, esto funciona muy bien, excepto si pdf.pngno es el tamaño correcto para mi texto de enlace.

Me gustaría poder decirle al navegador que escale la :afterimagen, pero por mi vida no puedo encontrar la sintaxis correcta. ¿O es esto como imágenes de fondo, donde el cambio de tamaño simplemente no es posible?

ETA: Me estoy inclinando hacia a) cambiar el tamaño de la imagen de origen para que sea del tamaño "correcto", del lado del servidor y / o b) cambiar el marcado para simplemente proporcionar una etiqueta IMG en línea. Estaba tratando de evitar ambas cosas, pero parece que serán más compatibles que intentar hacer cosas puramente con CSS. La respuesta a mi pregunta original parece ser "se puede clasificar de hacerlo, a veces".

background-sizeSe permite ajustar el . Sin embargo, aún debe especificar el ancho y la altura del bloque.

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

Consulte la tabla de compatibilidad completa en el MDN .

Tenga en cuenta que el :afterpseudo-elemento es un cuadro, que a su vez contiene la imagen generada. No hay forma de darle estilo a la imagen, pero puedes darle estilo al cuadro.

Lo siguiente es solo una idea, y la solución anterior es más práctica.

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

http://jsfiddle.net/Nwupm/

Inconvenientes: necesita conocer las dimensiones intrínsecas de la imagen, y le deja un poco de espacio en blanco, que no puedo eliminar del cajero automático.

Como mi otra respuesta obviamente no fue bien entendida, aquí hay un segundo intento:

Hay dos enfoques para responder la pregunta.

Práctico (¡solo muéstrame la maldita foto!)

Olvídate del :afterpseudo-selector, y ve por algo como

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

Teórico

La pregunta es: ¿Se puede diseñar el contenido generado ? La respuesta es: no, no puedes. Ha habido una larga discusión sobre la lista de correo del W3C sobre este tema, pero hasta ahora no hay solución.

El contenido generado se representa en un cuadro generado, y puede diseñar ese cuadro, pero no el contenido como tal . Los diferentes navegadores muestran un comportamiento muy diferente.

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

Chrome cambia el tamaño del primero, pero utiliza las dimensiones intrínsecas de la imagen para el segundo

Firefox y, por ejemplo, no admiten el primero, y usan dimensiones intrínsecas para el segundo

Opera utiliza dimensiones intrínsecas para ambos casos

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

Del mismo modo, los navegadores muestran resultados muy diferentes en cosas como http://jsfiddle.net/Nwupm/1/ , donde se genera más de un elemento. Tenga en cuenta que CSS3 aún se encuentra en una etapa temprana de desarrollo, y este problema aún no se ha resuelto.

Debes usar el fondo en lugar de la imagen.

.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; no tiene ningún efecto

positionin también funciona de manera muy extraña para los elementos básicos de la interfaz, así que tenga cuidado

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

Aquí hay otra solución (funcional): simplemente cambie el tamaño de sus imágenes al tamaño que desee :)

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

necesita pdf.png para ser 20px * 10px para que esto funcione. Los 20px / 10px en el CSS están aquí para dar el tamaño del bloque para que los elementos que vienen después del bloque no estén todos desordenados con la imagen.

No olvides guardar una copia de la imagen en bruto en su tamaño 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:"";
}

Puedes usar la zoompropiedad. Mira este jsfiddle

Puede cambiar la altura o el ancho del elemento Antes o Después de esta manera:

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

Utilicé este ancho de control de tamaño de fuente

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

Hoy en día con flexbox puede simplificar enormemente su código y solo ajustar 1 parámetro según sea necesario:

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

Ahora puede ajustar el ancho del elemento y la altura se ajustará automáticamente, aumentará / disminuirá el ancho hasta que la altura del elemento esté en el número que necesita.

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