¿Puedo cambiar el alto de una imagen en CSS: antes / después de los pseudo-elementos?

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

A File! 

luego tener CSS como

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

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

Me gustaría poder decirle al navegador que escale la imagen :after pero no puedo encontrar la syntax correcta. ¿O se trata de imágenes de fondo, donde el cambio de tamaño simplemente no es posible?

ETA: Me inclino por a) cambiar el tamaño de la imagen fuente para que sea del tamaño “correcto”, del lado del servidor y / o b) cambiar el marcado para simplemente suministrar una etiqueta IMG en línea. Estaba tratando de evitar ambas cosas, pero suenan como si fueran más compatibles que tratar de hacer cosas puramente con CSS. La respuesta a mi pregunta original parece ser “a veces puedes hacerlo”.

Se permite ajustar el background-size . Sin embargo, aún necesita 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:""; } 

Ver la tabla de compatibilidad completa en el MDN .

Tenga en cuenta que :after pseudo-elemento es un cuadro, que a su vez contiene la imagen generada. No hay forma de darle estilo a la imagen, pero puede darle estilo a la caja.

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

Desventajas: necesita conocer las dimensiones intrínsecas de la imagen, y le deja espacio en blanco, que no puedo eliminar de ATM.

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

Hay dos enfoques para responder la pregunta.

Práctico (¡solo enséñame la maldita foto!)

Olvídese de :after pseudo-selector, e ir por algo así 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: ¿Puedes diseñar el contenido generado ? La respuesta es: No, no puedes. Ha habido una larga discusión en la lista de correo del W3C sobre este tema, pero no hay solución hasta el momento.

El contenido generado se procesa en un cuadro generado, y puede darle estilo a ese cuadro, pero no al contenido como tal . 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 usa las dimensiones intrínsecas de la imagen para el segundo

Firefox y es decir, no son compatibles con el primero, y usan dimensiones intrínsecas para el segundo

la ópera usa 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 su etapa inicial de desarrollo, y este problema aún no se ha resuelto.

Debe usar fondo en lugar de 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; } 

Aquí hay otra solución (de trabajo): 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'); } 

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

Hoy en día con flexbox puedes simplificar mucho tu 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, boostá / disminuirá el ancho hasta que la altura del elemento esté en el número que necesita.

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

Puede usar la propiedad de zoom . Comprueba 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; }