Supponiamo che io voglia decorare i collegamenti a determinati tipi di file usando un'immagine. Potrei dichiarare i miei collegamenti come

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

quindi avere CSS come

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

Ora, questo funziona alla grande, tranne se pdf.pngnon è la giusta dimensione per il mio testo di collegamento.

Mi piacerebbe poter dire al browser di ridimensionare l' :afterimmagine, ma non riesco a trovare la giusta sintassi per tutta la vita. O è come le immagini di sfondo, dove il ridimensionamento non è possibile?

ETA: mi sto sporgendo verso a) ridimensionando l'immagine di origine in modo che sia della "giusta" dimensione, lato server e / o b) cambiando il markup per fornire semplicemente un tag IMG in linea. Stavo cercando di evitare entrambe queste cose, ma sembra che saranno più compatibili che cercare di fare cose puramente con i CSS. La risposta alla mia domanda iniziale sembra essere "si può ordinare di farlo, a volte".

La regolazione di background-sizeè consentita. Tuttavia, è ancora necessario specificare la larghezza e l'altezza del blocco.

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

Vedi la tabella di compatibilità completa su MDN .

Si noti che lo :afterpseudo-elemento è una scatola, che a sua volta contiene l'immagine generata. Non è possibile modellare l'immagine, ma è possibile modellare la casella.

Quella che segue è solo un'idea e la soluzione sopra è più pratica.

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

http://jsfiddle.net/Nwupm/

Svantaggi: devi conoscere le dimensioni intrinseche dell'immagine e ti lascia con degli spazi bianchi, che non riesco a liberarmi di ATM.

Dato che la mia altra risposta ovviamente non è stata ben compresa, ecco un secondo tentativo:

Esistono due approcci per rispondere alla domanda.

Pratico (fammi vedere la dannata foto!)

Dimentica lo :afterpseudo-selettore e cerca qualcosa di simile

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

Teorico

La domanda è: puoi dare uno stile ai contenuti generati ? La risposta è: no, non puoi. C'è stata una lunga discussione sulla mailing list del W3C su questo problema, ma finora nessuna soluzione.

Il contenuto generato viene reso in una casella generata e puoi modellare quella casella, ma non il contenuto in quanto tale . Browser diversi mostrano comportamenti molto diversi

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

Chrome ridimensiona il primo, ma utilizza le dimensioni intrinseche dell'immagine per il secondo

firefox e cioè non supportano il primo e usano le dimensioni intrinseche per il secondo

opera utilizza dimensioni intrinseche per entrambi i casi

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

Allo stesso modo, i browser mostrano risultati molto diversi su cose come http://jsfiddle.net/Nwupm/1/ , dove viene generato più di un elemento. Tieni presente che CSS3 è ancora in fase di sviluppo iniziale e questo problema non è stato ancora risolto.

Dovresti usare lo sfondo anziché l'immagine.

.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; non ha alcun effetto

positionin funziona anche in modo strano secondo il frontend dei fondamenti, quindi fai attenzione

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

Ecco un'altra soluzione (funzionante): ridimensiona le tue immagini nella dimensione desiderata :)

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

hai bisogno che pdf.png sia 20px * 10px perché questo funzioni. I 20px / 10px nel CSS sono qui per dare la dimensione del blocco in modo che gli elementi che seguono il blocco non siano tutti incasinati con l'immagine

Non dimenticare di conservare una copia dell'immagine grezza nella sua dimensione originale

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

Puoi usare la zoomproprietà Controllare questo jsfiddle

Puoi modificare l'altezza o la larghezza dell'elemento Prima o Dopo in questo modo:

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

Ho usato questa larghezza di controllo della dimensione del carattere

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

Oggi con flexbox puoi semplificare notevolmente il tuo codice e regolare solo 1 parametro secondo necessità:

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

Ora puoi semplicemente regolare la larghezza dell'elemento e l'altezza si regolerà automaticamente, aumentando / diminuendo la larghezza fino a quando l'altezza dell'elemento è al numero che ti serve.

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