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

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

тогда CSS как

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

Теперь это прекрасно работает, за исключением случаев, когда pdf.pngразмер моей ссылки не подходит.

Я бы хотел сказать браузеру масштабировать :afterизображение, но я не могу на всю жизнь найти правильный синтаксис. Или это как фоновые изображения, где изменение размера просто невозможно?

ETA: я склоняюсь к тому, чтобы либо а) изменить размер исходного изображения до «правильного» размера, на стороне сервера и / или б) изменить разметку, чтобы просто добавить встроенный тег 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; не имеет никакого эффекта

Положение также работает очень странно по отношению к основам интерфейса, так что будьте осторожны

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;