Могу ли я изменить высоту изображения в CSS: до /: после псевдоэлементов?

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

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

тогда CSS выглядит как

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

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

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

ETA: Я склоняюсь к тому, чтобы: а) изменить размер исходного изображения на "правильный" размер, серверную сторону и/или b) изменить разметку, чтобы просто добавить встроенный тег IMG. Я пытался избежать обоих этих вещей, но они звучат так, как будто они будут более совместимы, чем пытаться делать вещи исключительно с помощью CSS. Ответ на мой первоначальный вопрос, похоже, "вы можете сделать это иногда".

Ответы

Ответ 2

Обратите внимание, что псевдоэлемент :after - это поле, которое, в свою очередь, содержит сгенерированное изображение. Невозможно создать стиль изображения, но вы можете установить его в поле.

Ниже приведена только идея, а решение выше более практично.

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

http://jsfiddle.net/Nwupm/

Недостатки: вам нужно знать внутренние размеры изображения, и это оставляет вас с некоторыми пробелами, которые я не могу избавиться от ATM.

Ответ 3

Поскольку мой другой ответ явно не был хорошо понят, вот вторая попытка:

Есть два подхода, чтобы ответить на вопрос.

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

Забудьте о псевдоселекторе :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 все еще находится на ранней стадии разработки, и этот вопрос еще предстоит решить.

Ответ 4

Вы должны использовать фон вместо изображения.

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

}

Ответ 5

Вот другое (рабочее) решение: просто измените размер изображений до требуемого размера:)

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

для этого вам понадобится pdf.png для 20px * 10px. 20px/10px в css здесь, чтобы дать размер блока, чтобы элементы, которые приходят после блока, не все испортились с изображением

Не забудьте сохранить копию исходного изображения в исходном размере

Ответ 6

diplay: block; не имеют никакого эффекта

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

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

Ответ 7

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

Ответ 8

Вы можете использовать свойство zoom. Проверьте этот jsfiddle

Ответ 9

Вы можете изменить высоту или ширину элемента Before или After следующим образом:

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

Ответ 10

Я использовал эту ширину управления размером шрифта

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

Ответ 11

В настоящее время с помощью flexbox вы можете значительно упростить свой код и настроить только один параметр:

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

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

Ответ 12

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