¿Se puede lograr la modificación de la altura de la imagen en pseudo-elementos CSS (: antes/: después)?

en un esfuerzo por personalizar la apariencia de tipos de archivos específicos, los desarrolladores pueden incorporar imágenes como elementos decorativos. Al asignar una clase a enlaces, como , CSS se puede utilizar para mostrar una imagen después:

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

mientras este enfoque agrega efectivamente una imagen al enlace, residiendo en el enlace de la imagen. La capacidad de escalar imágenes dentro de los pseudoelementos ha sido una pregunta de larga data en el desarrollo web.

El método tradicional para cambiar el tamaño de las imágenes de fondo no es aplicable a los pseudo-elementos. Sin embargo, se puede lograr algún soporte para el cambio de tamaño de la imagen a través de la propiedad de tamaño de fondo:

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

Este enfoque implica ajustar el tamaño de fondo y definir explícitamente el ancho y la altura del bloque circundante. Es importante tener en cuenta que la compatibilidad es limitada para esta técnica. La tabla de compatibilidad MDN proporciona más detalles sobre el soporte del navegador.