que - ¿Puedo cambiar la altura de una imagen en CSS: antes/: después de pseudo-elementos?

selectores avanzados css

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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;

}

Answer 4

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

Answer 5

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.

Answer 6

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

Answer 7

Puede utilizar la propiedad de zoom . Revisa este jsfiddle

Answer 8

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

Consulte la tabla de compatibilidad completa en el MDN .

Answer 9

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

http://jsfiddle.net/Nwupm/

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.

Answer 10

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