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

Réglage de la background-size est 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:"";
}

Consultez le tableau de compatibilité complet sur le MDN. .

Answer 2

Notez que le :after est une boîte, qui contient à son tour 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 le 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 il vous laisse des espaces blancs, dont je ne peux pas me débarrasser en ATM.

Answer 3

Comme mon autre réponse n'a manifestement pas été bien comprise, voici une deuxième tentative :

Il y a deux approches pour répondre à la question.

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

Oubliez le :after pseudo-sélecteur, et opter pour quelque chose comme

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

Théorie

La question est la suivante : pouvez-vous styliser contenu généré ? La réponse est : Non, vous ne pouvez pas. Il y a eu longue discussion sur la liste de diffusion du W3C sur cette question, mais aucune solution à ce jour.

Le contenu généré est rendu dans une boîte générée, et vous pouvez donner un style à cette boîte, mais pas le contenu en tant que tel . Les différents navigateurs présentent des comportements très différents

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

Chrome redimensionne la première, mais utilise les dimensions intrinsèques de l'image pour la seconde

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

opéra utilise les dimensions intrinsèques pour les deux cas

(de 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 éléments tels que http://jsfiddle.net/Nwupm/1/ où plus d'un élément est généré. Gardez à l'esprit que CSS3 n'en est qu'à ses débuts et que ce problème n'a pas encore été résolu.

Answer 4

Vous devriez 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;

}

Answer 5

diplay: block; n'ont aucun effet

positionin fonctionne également de manière très étrange en fonction des principes fondamentaux du front-end, donc soyez prudent.

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