Supposons que je veuille décorer des liens vers certains types de fichiers à l'aide d'une image. Je pourrais déclarer mes liens comme

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

puis CSS comme

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

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

J'aimerais pouvoir dire au navigateur de redimensionner l' :afterimage, mais je ne peux pas pour la vie de moi trouver la bonne syntaxe. Ou est-ce comme des images d'arrière-plan, où le redimensionnement n'est tout simplement pas possible?

ETA: Je penche pour a) redimensionner l'image source pour qu'elle soit de la "bonne" taille, côté serveur et / ou b) changer le balisage pour fournir simplement une balise IMG en ligne. J'essayais d'éviter ces deux choses, mais elles semblent être 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".

Le réglage du background-sizeest autorisé. Cependant, vous devez toujours spécifier la largeur et la hauteur du bloc.

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

Voir le tableau de compatibilité complet sur le MDN .

Notez que le :afterpseudo-élément est une boîte, qui à son tour contient l'image générée. Il n'y a aucun moyen de styliser l'image, mais vous pouvez styliser la boîte.

Ce qui suit n'est qu'une idée, et la solution ci - dessus est plus pratique.

.pdflink:after {
    content: url('/images/pdf.png');
    transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

Inconvénients: vous devez connaître les dimensions intrinsèques de l'image, et cela vous laisse un espace, dont je ne peux pas me débarrasser de l'ATM.

Puisque mon autre réponse n'était évidemment pas bien comprise, voici une deuxième tentative:

Il existe deux approches pour répondre à la question.

Pratique (montrez-moi juste la putain de photo!)

Oubliez le :afterpseudo-sélecteur, et optez pour quelque chose comme

.pdflink {
    min-height: 20px;
    padding-right: 10px;
    background-position: right bottom;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

Théorique

La question est: pouvez-vous styliser le contenu généré ? La réponse est: non, vous ne pouvez pas. Il y a eu une longue discussion sur la liste de diffusion du W3C sur ce problème, mais aucune solution jusqu'à présent.

Le contenu généré est rendu dans une zone générée et vous pouvez styliser cette zone, mais pas le contenu en tant que tel . Différents navigateurs montrent un comportement très différent

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}  
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}

Chrome redimensionne le premier, mais utilise les dimensions intrinsèques de l'image pour le second

firefox et ie ne supportent pas le premier, et utilisent des dimensions intrinsèques pour le second

l'opéra utilise des dimensions intrinsèques dans les deux cas

(depuis http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html )

De même, les navigateurs affichent des résultats très différents sur des choses comme http://jsfiddle.net/Nwupm/1/ , où plus d'un élément est généré. Gardez à l'esprit que CSS3 est encore au stade de développement précoce, et ce problème n'a pas encore été résolu.

Vous devez utiliser l'arrière-plan au lieu de l'image.

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}

diplay: block; n'a aucun effet

positionin fonctionne également de manière très étrange en fonction des principes fondamentaux du frontend, alors soyez prudent

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}

Voici une autre solution (qui fonctionne): redimensionnez simplement vos images à la taille souhaitée :)

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

vous avez besoin de pdf.png pour être 20px * 10px pour que cela fonctionne. Les 20px / 10px dans le CSS sont là pour donner la taille du bloc afin que les éléments qui viennent après le bloc ne soient pas tous gâchés avec l'image

N'oubliez pas de conserver une copie de l'image brute dans sa taille d'origine

.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:"";
}

Vous pouvez utiliser la zoompropriété. Vérifiez ce jsfiddle

Vous pouvez modifier la hauteur ou la largeur de l' élément Avant ou Après comme ceci:

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

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

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

De nos jours, avec flexbox, vous pouvez grandement simplifier votre code et ajuster seulement 1 paramètre selon vos besoins:

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

Maintenant, vous pouvez simplement ajuster la largeur de l'élément et la hauteur s'ajustera automatiquement, augmentez / diminuez la largeur jusqu'à ce que la hauteur de l'élément soit au nombre dont vous avez besoin.

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