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

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

A File! 

тогда CSS

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

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

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

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

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

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

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

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

Забудьте о :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; } 

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

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

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

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

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

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

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

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

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

 .element:after { display: block; content: url('your-image.png'); height: 50px; //add any value you need for height or width width: 50px; } 
  • objective: перед и: после псевдо-элементов с jQuery
  • css вращать псевдо: после или: до содержимого: ""
  • Можно ли установить порядок укладки псевдоэлементов ниже их родительского элемента?
  • Как я могу сделать сгенерированный контент доступным?
  • «Text-decoration» и псевдоэлемент «: after», пересмотренный
  • Interesting Posts

    Получить название браузера Chrome с помощью c #

    Можно ли использовать атрибут входного значения в качестве селектора CSS?

    Соглашение об именах classов CSS

    Внешний жесткий диск неправильно распознан как внутренний жесткий диск

    Нарисуйте прозрачный круг за пределами

    Встраивание YouTube дает ошибку «с ограниченным воспроизведением на определенных сайтах», несмотря на метаданные API, указывающие на то, что

    Редактирование редактирования сквозных нитей

    Затухание в / из GameObject

    Как найти пару с k-й наибольшей суммой?

    Отобразить точное значение переменной в R

    Как указать минимальный SDK в телефонном разговоре? Он игнорирует android-minsdkversion в config.xml

    Как добавитьTrack в MediaStream в WebRTC

    Программное обеспечение для работы в качестве звуковой карты и передачи по сети

    Клонирование жестких дисков из аппаратного RAID-массива?

    $ 0 (название программы) в Java? Откройте для себя основной class?

    Давайте будем гением компьютера.