Modification de la hauteur de l'image dans les pseudo-éléments CSS: est-il possible?

modifiant la hauteur d'une image contenue dans un pseudo-élément CSS (: avant /: après) peut être difficile mais pas impossible. Par défaut, le redimensionnement de l'image n'est pas directement pris en charge avec CSS.

Pour réaliser la mise à l'échelle souhaitée, considérez les approches suivantes:

1. Ajustez les arrière-plans:

pour: après les pseudo-éléments, ajustez la propriété de taille arrière. Cependant, assurez-vous de spécifier la largeur et la hauteur de l'élément de bloc contenant l'image en utilisant les propriétés de largeur et de hauteur.

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

Compatibilité:

être conscient de la compatibilité du navigateur lors de l'utilisation de cette méthode. Reportez-vous à la table de compatibilité complète de MDN pour plus d'informations.

2. Redimensionnement de l'image source:

Alternativement, envisagez de redimensionner l'image d'origine à la taille du serveur de taille appropriée avant de l'utiliser dans le CSS. Cela garantit que l'image s'affiche aux dimensions souhaitées sans s'appuyer sur la mise à l'échelle du navigateur.

3. Tag IMG en ligne:

Pour une approche plus simple, incorporez une balise en ligne aux côtés du pseudo-élément CSS. Cette approche garantit que l'image rendra à la taille spécifiée, mais s'écarte de l'objectif initial de minimiser le balisage.