Comment puis-je redimensionner des images dans CSS :before/:after pseudo-elements ?

Modification de la hauteur de l'image en CSS :avant/:après les pseudo-éléments

En CSS, les pseudo-éléments (:avant et :après) permettent d'améliorer l'affichage des éléments sans modifier directement leur contenu. Cependant, ajuster la hauteur de l'image au sein de ces pseudo-éléments peut poser un défi.

Supposons que vous souhaitiez décorer des liens vers des types de fichiers spécifiques à l'aide d'images. Vous pouvez définir vos liens avec une classe et inclure des règles CSS comme indiqué ci-dessous :

<a href="foo.pdf">

Bien que cette approche fonctionne efficacement, elle ne prend pas en compte la possibilité que l'image ait une taille inadaptée au texte du lien.

Au départ, vous pouvez tenter de redimensionner l'image :after en utilisant CSS, mais malheureusement, cela n'est pas directement possible. Contrairement aux images d'arrière-plan, qui peuvent être mises à l'échelle à l'aide de la propriété background-size, les pseudo-éléments n'offrent pas un mécanisme de redimensionnement similaire.

Cependant, il existe une solution de contournement qui permet un redimensionnement limité au sein des pseudo-éléments :

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

En définissant la taille de l'arrière-plan et en spécifiant la largeur et la hauteur du bloc, vous pouvez redimensionner efficacement l'image dans le pseudo-élément :after. Il est important de noter que cette approche nécessite que le pseudo-élément :after ait un certain contenu défini même s'il est vide ("").

Pour des informations plus détaillées, reportez-vous à la compatibilité Mozilla Developer Network (MDN). Tableau.

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!