Puis-je modifier la hauteur d'une image dans les pseudo-éléments CSS :before/:after ?

Question

Supposons que je veuille décorer des liens vers certains types de fichiers en utilisant une image. Je pourrais déclarer mes liens comme

<a href='foo.pdf' class='pdflink'>A File!</a>

puis avoir des CSS comme

.pdflink:after { content: url('/images/pdf.png') }

Maintenant, cela fonctionne très bien, sauf si pdf.png n'est pas de la bonne taille pour le texte de mon lien.

J'aimerais pouvoir dire au navigateur de mettre à l'échelle l'image de la :after mais je n'arrive pas à trouver la bonne syntaxe. Ou est-ce que c'est comme pour les images d'arrière-plan, où le redimensionnement n'est tout simplement pas possible ?

ETA : Je penche pour l'une ou l'autre des solutions suivantes : a) redimensionner l'image source pour qu'elle ait la "bonne" taille, côté serveur et/ou b) modifier le balisage pour fournir simplement une balise IMG en ligne. J'essayais d'éviter ces deux solutions, mais elles me semblent plus compatibles que d'essayer de faire des choses uniquement avec CSS. La réponse à ma question initiale semble être "vous pouvez". en quelque sorte le faire, parfois".

Answer 1

Aujourd'hui, avec le système Flexbox, vous pouvez simplifier considérablement votre code et n'ajuster qu'un seul paramètre selon les besoins :

.pdflink:after {
    content: url('/images/pdf.png');
    display: inline-flex;
    width: 10px;
}

Désormais, il vous suffit de régler la largeur de l'élément et la hauteur s'ajuste automatiquement. Augmentez/diminuez la largeur jusqu'à ce que la hauteur de l'élément corresponde à la valeur souhaitée.

Answer 2

Vous pouvez modifier la hauteur ou la largeur de la Avant ou après élément comme celui-ci :

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}

Answer 3

J'ai utilisé cette largeur de contrôle de la taille de la police

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}

Answer 4

content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;