¿Puedo cambiar la altura de una imagen en CSS: antes/:después de pseudoelementos?
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 tiene el tamaño correcto para el texto de mi enlace.
Me gustaría poder decirle al navegador que escale la :afterimagen, pero por mi vida no puedo encontrar la sintaxis correcta. ¿O es como imágenes de fondo, donde simplemente no es posible cambiar el tamaño?
ETA: Me inclino por a) cambiar el tamaño de la imagen de origen para que tenga el tamaño "correcto", en el 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 únicamente con CSS. La respuesta a mi pregunta original parece ser "a veces puedes hacerlo ".
Se permite ajustar el background-size. Sin embargo, aún necesitarás especificar el ancho y el alto del bloque.
.pdflink:after {
background-image: url('/images/pdf.png');
background-size: 10px 20px;
display: inline-block;
width: 10px;
height: 20px;
content:"";
}
Consulta la tabla de compatibilidad completa en el MDN .
Tenga en cuenta que el :afterpseudoelemento 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: necesitas conocer las dimensiones intrínsecas de la imagen y te deja algunos espacios en blanco, de los que no puedo deshacerme con ATM.
