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

Oui, la question originale a été posée il y a huit ans, mais elle est pertinente aujourd'hui comme elle l'a toujours été. Je vais de pilier en pilier sur cette question de ::before, depuis environ une semaine ::after, et ça me fait tourner en bourrique.

A partir de cette page, et d'autres sur le sujet - j'ai finalement réussi à mettre en place et à réduire la taille d'une image dans le pseudo tag.

** Note d'exécution .colnav est juste ma classe conteneur, qui contient un ensemble de balises < UL > et < LI > avec un ensemble de < a hrefs à l'intérieur.

Voici le code (complet)

.colnav li.nexus-button a:hover:before {   
    background-image: url('/images/fleur-de-lis.png');
    background-size: 90px 20px;
    background-repeat: no-repeat;
    width: 130px;
    height: 20px;
    margin-left: -120px;
    margin-top: -3px;
    transform: scale(1.5);
    content: "";
    position: absolute;
}

Le fichier image était (est) de 120 x 80, et l'image a été réduite à 90 x 20, où elle s'est ensuite parfaitement intégrée derrière la balise html href, et tout s'est passé comme suit position : absolue à la fin.

Answer 2

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    width: 10px; 
    height: 20px;
    padding-left: 10px;// equal to width of image.
    margin-left:5px;// to add some space for better look
    content:"";
}

Answer 3

Au lieu de définir la largeur et la hauteur de l'image d'arrière-plan, vous pouvez définir la largeur et la hauteur de l'élément lui-même.

.pdflink::after {
  content: '';
  background-image: url(/images/pdf.png);
  width: 100px;
  height: 100px;
  background-size: contain;
}

Answer 4

Voici une autre solution (qui fonctionne) : redimensionnez simplement vos images à la taille que vous souhaitez :)

.pdflink:after {
    display: block;
    width: 20px;
    height: 10px;
    content:url('/images/pdf.png');
}

Pour que cela fonctionne, il faut que le fichier pdf.png soit de 20px * 10px. Les 20px/10px dans la css sont là pour donner la taille du bloc afin que les éléments qui viennent après le bloc ne soient pas tous perturbés par l'image.

N'oubliez pas de conserver une copie de l'image brute dans sa taille originale.

Answer 5

Vous pouvez utiliser le zoom propriété. Vérifiez ce jsfiddle