Zauważ, że pseudoelement :after jest ramką, która z kolei zawiera wygenerowany obraz. Nie ma sposobu na stylizację obrazu, ale możesz stylizować pudełko.

Poniżej jest tylko pomysłem, a rozwiązanie powyżej jest bardziej praktyczne.

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

Http://jsfiddle.net/Nwupm/

Wady: musisz znać wewnętrzne wymiary obrazu, a to pozostawia kilka białych spacji, których nie mogę się pozbyć.

Ponieważ moja druga odpowiedź nie była oczywiście dobrze zrozumiana, oto druga próba:

Praktyczny (Pokaż mi to cholerne zdjęcie!)

Zapomnij o :after pseudo-selektorze i wybierz coś w rodzaju

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

Teoretyczne

Pytanie brzmi: czy możesz stylować wygenerowaną treść? Odpowiedź brzmi: Nie, Nie możesz. była długa dyskusja na liście dyskusyjnej W3C w tej sprawie, ale na razie nie ma rozwiązania.

Wygenerowana zawartość jest renderowana do wygenerowanego pudełka i możesz stylować to pudełko, ale Nie zawartość jako taka . Różne przeglądarki wykazują bardzo różne zachowania

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

Chrome zmienia rozmiar pierwszego, ale wykorzystuje wewnętrzne wymiary obrazu dla drugiego

Firefox i ie nie obsługują pierwszego i używają wewnętrznych wymiarów dla drugi

Opera używa wewnętrznych wymiarów dla obu przypadki

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

Podobnie, przeglądarki pokazują bardzo różne wyniki na takich rzeczach jak http://jsfiddle.net/Nwupm/1/, gdzie generowany jest więcej niż jeden element. Należy pamiętać, że CSS3 jest jeszcze na wczesnym etapie rozwoju, a ten problem nie został jeszcze rozwiązany.

Powinieneś użyć tła zamiast obrazu.

.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; nie mają żadnego efektu

Pozycjonowanie działa również bardzo dziwnie na frontend foundamentals, więc bądź ostrożny

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

Oto inne (działające) rozwiązanie : po prostu zmień rozmiar zdjęć do pożądanego rozmiaru:)

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

Potrzebujesz pdf.png ma być 20px * 10px, aby to działało. 20px/10px w css są tutaj, aby podać rozmiar bloku, aby elementy, które pojawiają się po bloku, nie były wszystkie pomieszane z obrazem

Nie zapomnij zachować kopii obrazu raw w oryginalnym rozmiarze

Tak, pierwotne pytanie zostało zadane osiem lat temu, ale tak naprawdę jest aktualne dzisiaj, jak zawsze. Teraz, idę z filar do postu nad tym zagadnieniem:: przed, przez około tydzień:: po, I to prowadzi mnie za zakrętem.

Z tej strony i innych na ten temat-w końcu poskładałem to do kupy i zmieściłem obrazek w pseudo tagu.

** Uwaga bieżąca .colnav jest tylko moją klasą kontenerów, która zawiera i zestaw znaczników z zestawem

Poniżej znajduje się kod (kompletny)

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

Plik obrazu miał (jest) 120 x 80, a obraz został zredukowany do 90x 20, gdzie następnie całkiem ładnie pasował za znacznikiem html href, a wszystko to razem z tą pozycją: absolute na końcu.

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

Możesz zmienić wysokość lub szerokość przed lub po w następujący sposób:

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

Możesz użyć właściwości zoom. Sprawdź Ten jsfiddle

Użyłem tej czcionki rozmiar kontroli szerokość

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

Obecnie dzięki flexbox możesz znacznie uprościć kod i dostosować tylko 1 parametr w razie potrzeby:

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

Teraz możesz po prostu dostosować szerokość elementu, a wysokość automatycznie się dostosuje, zwiększ / zmniejsz szerokość, aż Wysokość elementu będzie na wymaganej liczbie.

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

Zamiast ustawiać szerokość i wysokość obrazu tła, można ustawić szerokość i wysokość samego elementu.

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