que - ¿Puedo cambiar la altura de una imagen en CSS: antes/: después de pseudo-elementos?
selectores avanzados css (10)
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 tengo CSS como
.pdflink:after { content: url(''/images/pdf.png'') }
Ahora, esto funciona muy bien, excepto si pdf.png no es del tamaño correcto para el texto de mi enlace.
Me gustaría poder decirle al navegador que escale la :after imagen, pero no puedo, por mi vida, encontrar la sintaxis correcta. ¿O es esto como imágenes de fondo, donde el cambio de tamaño simplemente no es posible?
ETA: Me inclino por cualquiera de las siguientes opciones: a) cambiar el tamaño de la imagen de origen para que tenga el 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 suena como que serán más compatibles que tratando de hacer cosas puramente con CSS. La respuesta a mi pregunta original parece ser "a veces puedes hacerlo".
Aquí hay otra solución (que funciona): 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 de modo 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.
Como mi otra respuesta obviamente no fue bien entendida, aquí hay un segundo intento:
Hay dos enfoques para responder a la pregunta.
Práctico (solo muéstrame la maldita foto!)
Olvídate de :after pseudo-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: ¿Puedes estilizar el contenido generado ? La respuesta es: No, no puedes. Ha habido una lists.w3.org/Archives/Public/www-style/2011Nov/… sobre este tema, pero no hay solución hasta ahora.
El contenido generado se representa en un cuadro generado, y usted puede diseñar ese cuadro, pero no el contenido como tal . Diferentes navegadores muestran comportamientos muy diferentes.
#foo {content: url("bar.jpg"); width: 42px; height:42px;} #foo::before {content: url("bar.jpg"); width: 42px; height:42px;}Chrome cambia el tamaño de la primera, pero utiliza las dimensiones intrínsecas de la imagen para la segunda
Firefox, es decir, no admite la primera, y usa dimensiones intrínsecas para la segunda
Opera utiliza dimensiones intrínsecas para ambos casos.
(de http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html )
De manera similar, 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.
Deberías 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;
}
He utilizado 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 simplemente 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.
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;
}
Puede utilizar la propiedad de zoom . Revisa este jsfiddle
Se permite ajustar el background-size del background-size . 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:"";
}
Tenga en cuenta que :after pseudo-elemento es un cuadro, que a su vez contiene la imagen generada. No hay forma de aplicar un estilo a la imagen, pero puede aplicar un estilo al cuadro.
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);
}
Inconvenientes: necesita conocer las dimensiones intrínsecas de la imagen, y le deja algo de espacio en blanco, que no puedo eliminar de los cajeros automáticos.
.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:"";
}