Załóżmy, że chcę ozdobić łącza do niektórych typów plików za pomocą obrazu. Mogę zadeklarować moje linki jako

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

wtedy mają CSS jak

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

Teraz działa to świetnie, chyba że pdf.pngnie ma odpowiedniego rozmiaru dla mojego tekstu linku.

Chciałbym móc powiedzieć przeglądarce, aby skalowała :afterobraz, ale przez całe życie nie mogę znaleźć właściwej składni. Czy to jest jak obrazy tła, w których zmiana rozmiaru jest po prostu niemożliwa?

ETA: Skłaniam się do albo: a) zmiany rozmiaru obrazu źródłowego, aby był „odpowiedni” rozmiar, po stronie serwera i / lub b) zmiany znaczników, aby po prostu podać tag IMG w tekście. Starałem się unikać obu tych rzeczy, ale brzmią one tak, jakby były bardziej kompatybilne niż próby robienia rzeczy wyłącznie z CSS. Odpowiedź na moje pierwotne pytanie wydaje się brzmieć „ czasem możesz to zrobić”.

Dostosowanie background-sizejest dozwolone. Jednak nadal musisz określić szerokość i wysokość bloku.

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

Zobacz pełną tabelę kompatybilności w MDN .

Zauważ, że :afterpseudoelement jest pudełkiem, które z kolei zawiera wygenerowany obraz. Nie ma sposobu na stylizację obrazu, ale możesz stylizować pudełko.

Poniżej znajduje się tylko pomysł, a powyższe rozwiązanie jest bardziej praktyczne.

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

http://jsfiddle.net/Nwupm/

Wady: musisz znać wewnętrzne wymiary obrazu i pozostawia ci trochę białych znaków, których nie mogę pozbyć się bankomatu.

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

Istnieją dwa podejścia do odpowiedzi na pytanie.

Praktyczne (po prostu pokaż mi ten cholerny obraz!)

Zapomnij o :afterpseudo-selektorze i wybierz coś takiego

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

Teoretyczny

Pytanie brzmi: czy możesz stylizować generowaną treść ? Odpowiedź brzmi: nie, nie możesz. Nastąpiła długa dyskusja na liście mailingowej W3C w tej sprawie, ale żadne rozwiązanie nie tak daleko.

Wygenerowana treść jest renderowana w wygenerowane pole i można nadać mu styl, ale nie treść jako taką . 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 używa wewnętrznych wymiarów obrazu dla drugiego

Firefox, tj. nie obsługują pierwszego, i używają wewnętrznych wymiarów dla drugiego

opera używa wewnętrznych wymiarów w obu przypadkach

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

Podobnie przeglądarki wyświetlają bardzo różne wyniki dotyczące takich rzeczy, jak http://jsfiddle.net/Nwupm/1/ , gdzie generowany jest więcej niż jeden element. Należy pamiętać, że CSS3 jest wciąż na wczesnym etapie rozwoju i 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

positionin działa również bardzo dziwnie, jeśli chodzi o podstawy, 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 swoich zdjęć do pożądanego rozmiaru :)

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

potrzebujesz pdf.png, aby mieć 20px * 10px, aby to działało. 20px / 10px w css są tutaj, aby podać rozmiar bloku, aby elementy, które następują po bloku, nie zostały pomieszane z obrazem

Nie zapomnij zachować kopii surowego obrazu w oryginalnym rozmiarze

.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 skorzystać z zoomwłaściwości. Sprawdź to jsfiddle

Możesz zmienić wysokość lub szerokość elementu Before lub After 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;
}

Użyłem tej szerokości kontrolnej rozmiaru czcionki

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

Obecnie za pomocą Flexboksa możesz znacznie uprościć swój 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 dopasować szerokość elementu, a wysokość automatycznie się dostosuje, zwiększ / zmniejsz szerokość, aż wysokość elementu osiągnie żądaną liczbę.

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