La modification de la hauteur de l'image peut être réalisée dans les pseudo-éléments CSS (: avant /: après)?

Dans un effort pour personnaliser l'apparition de types de fichiers spécifiques, les développeurs peuvent incorporer des images comme éléments décoratifs. En attribuant une classe à des liens, tels que , CSS peut être utilisé pour afficher une image par la suite:

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

pendant que cette approche ajoute efficacement une image au lien, la réalisation de la image sur la image. La possibilité d'étendre les images dans les pseudo-éléments a été une question de longue date du développement Web.

La méthode traditionnelle de redimensionnement des images d'arrière-plan n'est pas applicable aux pseudo-éléments. Cependant, une certaine prise en charge de la redimensionnement des images peut être réalisée via la propriété de taille arrière:

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

Cette approche consiste à ajuster la taille de l'arrière-plan tout en définissant explicitement la largeur et la hauteur du bloc environnant. Il est important de noter que la compatibilité est limitée pour cette technique. Le tableau de compatibilité MDN fournit plus de détails sur la prise en charge du navigateur.