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

Votre enquête est de savoir s'il est possible de modifier la hauteur d'une image utilisée dans un CSS: avant /: après le pseudo-élément. 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 pseudo-élémentaires.

Solution:

Vous pouvez partiellement atteindre votre objectif en ajustant la propriété de taille arrière 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 dans le bloc spécifié. Cependant, notez que les dimensions globales du bloc elle-même devront également être définies en conséquence.

Solutions alternatives:

Vous avez exprimé des réservations sur la redimension de l'image source ou la modification de la marque pour inclure une balise IMG en ligne. Cependant, si la compatibilité est une priorité, ces options peuvent s'avérer plus fiables que de se fier uniquement à CSS.