Припустимо, я хочу прикрасити посилання на певні типи файлів за допомогою зображення. Я можу оголосити свої посилання як

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

тоді мати як CSS

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

Тепер це чудово працює, за винятком випадків, коли pdf.pngне потрібний розмір тексту мого посилання.

Я хотів би мати можливість сказати браузеру масштабувати :afterзображення, але я не можу за все життя знайти потрібний синтаксис. Або це схоже на фонові зображення, де зміни розміру просто неможливо?

ETA: Я схиляюся до а) зміни розміру вихідного зображення на "правильний" розмір, на стороні сервера та / або b) зміни розмітки, щоб просто поставити тег IMG в рядку. Я намагався уникати обох цих речей, але вони здаються, що вони будуть більш сумісними, ніж намагаються робити речі виключно з CSS. Відповідь на мій первісний питання , здається, «ви можете сортувати це зробити, іноді».

Регулювання background-sizeдозволено. Однак вам все одно потрібно вказати ширину та висоту блоку.

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

Дивіться повну таблицю сумісності в MDN .

Зауважте, що :afterпсевдоелемент - це поле, яке, в свою чергу, містить сформоване зображення. Немає способу стилізувати зображення, але ви можете стилізувати коробку.

Далі - лише ідея, а рішення вище - більш практичне.

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

http://jsfiddle.net/Nwupm/

Недоліки: вам потрібно знати внутрішні розміри зображення, і це залишає вам деякий пробіл, якого я не можу позбутися від банкомату.

Оскільки моя інша відповідь, очевидно, недостатньо зрозуміла, ось друга спроба:

Існує два підходи, щоб відповісти на питання.

Практична (просто покажи мені чортову картину!)

Забудьте про :afterпсевдоселектор і займіться чимось подібним

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

Теоретичний

Питання: Чи можете ви створити стиль, створений вмістом ? Відповідь: Ні, ви не можете. У списку розсилки W3C тривала дискусія цьому питанні , але поки що немає рішення.

Створений контент виводиться в створене поле, і ви можете стилізувати це поле, але не вміст як такий . У різних браузерах проявляється дуже різна поведінка

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

Chrome змінює розмір першого, але використовує внутрішні розміри зображення для другого

firefox, тобто не підтримують перше, а використовують внутрішні розміри для другого

опера використовує внутрішні розміри для обох випадків

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

Так само браузери показують дуже різні результати на таких речах, як http://jsfiddle.net/Nwupm/1/ , де генерується більше одного елемента. Майте на увазі, що CSS3 ще на стадії розробки, і це питання ще не вирішено.

Ви повинні використовувати фон замість зображення.

.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; не мають жодного ефекту

Positionin також працює дуже дивно, оскільки він відповідає принципам основи, тому будьте обережні

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

Ось ще одне (робоче) рішення: просто змініть розміри зображень до потрібного розміру :)

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

для цього вам потрібно pdf.png бути 20px * 10px. 20px / 10px в css тут, щоб надати розмір блоку, щоб елементи, що надходять після блоку, не всі змішалися із зображенням

Не забудьте зберегти копію неочищеного зображення в оригінальному розмірі

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

Ви можете використовувати zoomмайно. Перевірте цю jsfiddle

Ви можете змінити висоту або ширину елемента " Перед" або "Після" таким чином:

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

Я використав цю ширину контролю розміру шрифту

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

На сьогоднішній день за допомогою flexbox ви можете значно спростити свій код і змінити лише 1 параметр за потребою:

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

Тепер ви можете просто регулювати ширину елемента, і висота автоматично регулюватиметься, збільшувати / зменшувати ширину, поки висота елемента не буде на потрібне вам число.

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