Puis-je contrôler la hauteur des images dans les pseudo-éléments CSS :before/:after ?

Puis-je ajuster la hauteur de l'image en CSS :avant/:après les pseudo-éléments ?

Votre demande est de savoir s'il est possible de modifier la hauteur d'une image utilisée au sein d'un pseudo-élément CSS :before/:after. Bien que les images d'arrière-plan puissent être redimensionnées, il n'est pas immédiatement clair si la même chose est possible pour les images de pseudo-éléments.

Solution :

Vous pouvez partiellement atteindre votre objectif en ajustant la propriété background-size pour le pseudo-élément. Cependant, gardez à l'esprit que vous devrez toujours définir la largeur et la hauteur du bloc entourant l'image :

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

Cette méthode vous permet de contrôler la taille de l'image à l'intérieur du bloc spécifié. Cependant, notez que les dimensions globales du bloc lui-même devront également être définies en conséquence.

Solutions alternatives :

Vous avez exprimé des réserves quant au redimensionnement de l'image source ou modifier le balisage pour inclure une balise IMG en ligne. Cependant, si la compatibilité est une priorité, ces options peuvent s'avérer plus fiables que de s'appuyer uniquement sur CSS.

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!