Comment redimensionner les images en CSS : avant/: après les pseudo-éléments ?

Mise à l'échelle des images en CSS : avant/:après les pseudo-éléments

La décoration des liens avec des images à l'aide de pseudo-éléments offre un attrait visuel amélioré. Cependant, lorsque les dimensions de l'image ne s'alignent pas avec le texte du lien, il est nécessaire de modifier la hauteur de l'image.

Syntaxe de mise à l'échelle de la hauteur de l'image

Contrairement aux images d'arrière-plan, les images de pseudo-éléments peuvent être mises à l'échelle à l'aide de la propriété background-size. Cependant, cela nécessite de préciser la largeur et la hauteur du bloc contenant.

Le CSS corrigé serait :

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

Dans ce code :

• background- taille : 10 px 20 px ; redimensionne l'image à une largeur de 10 px et une hauteur de 20 px.
• display : inline-block ; garantit que le pseudo-élément se comporte comme un élément en ligne.
• width : 10px ; hauteur : 20px ; définir les dimensions du bloc conteneur.
• content: ""; masque tout contenu par défaut dans le pseudo-élément.

Compatibilité

Reportez-vous au tableau de compatibilité MDN pour plus de détails sur la prise en charge dans différents navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!