Misalkan saya ingin menghias tautan ke jenis file tertentu menggunakan gambar. Saya dapat mendeklarasikan tautan saya sebagai

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

kemudian punya CSS like

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

Sekarang, ini berfungsi dengan baik, kecuali jika pdf.pngbukan ukuran yang tepat untuk teks tautan saya.

Saya ingin dapat memberitahu browser untuk skala :aftergambar, tetapi saya tidak bisa seumur hidup saya menemukan sintaks yang tepat. Atau apakah ini seperti gambar latar belakang, di mana pengubahan ukuran saja tidak dimungkinkan?

ETA: Saya condong ke arah a) mengubah ukuran gambar sumber menjadi ukuran "benar", sisi server dan / atau b) mengubah markup untuk sekadar memasok inline tag IMG. Saya mencoba menghindari kedua hal itu tetapi kedengarannya mereka akan lebih kompatibel daripada mencoba melakukan hal-hal murni dengan CSS. Jawaban untuk pertanyaan asli saya tampaknya menjadi "Anda dapat mengurutkan dari melakukannya, kadang-kadang".

Menyesuaikan background-sizediizinkan. Anda masih harus menentukan lebar dan tinggi blok.

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

Lihat Tabel Kompatibilitas lengkap di MDN .

Perhatikan bahwa :afterelemen pseudo adalah kotak, yang pada gilirannya berisi gambar yang dihasilkan. Tidak ada cara untuk menata gambar, tetapi Anda bisa menata kotak.

Berikut ini hanyalah sebuah ide, dan solusi di atas lebih praktis.

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

http://jsfiddle.net/Nwupm/

Kelemahan: Anda perlu tahu dimensi intrinsik dari gambar, dan ia meninggalkan Anda dengan spasi putih, yang saya tidak bisa hilangkan dari ATM.

Karena jawaban saya yang lain jelas tidak dipahami dengan baik, inilah upaya kedua:

Ada dua pendekatan untuk menjawab pertanyaan itu.

Praktis (cukup tunjukkan gambarnya!)

Lupakan :afterpemilih-semu, dan pergi untuk sesuatu seperti

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

Teoretis

Pertanyaannya adalah: Dapatkah Anda menata konten yang dihasilkan ? Jawabannya adalah: Tidak, Anda tidak bisa. Sudah ada diskusi panjang di milis W3C tentang masalah ini, tetapi sejauh ini tidak ada solusi.

Konten yang dihasilkan dirender ke dalam kotak yang dibuat, dan Anda bisa menata kotak itu, tetapi bukan konten seperti itu . Browser yang berbeda menunjukkan perilaku yang sangat berbeda

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

Chrome mengubah ukuran yang pertama, tetapi menggunakan dimensi intrinsik gambar untuk yang kedua

firefox dan ie tidak mendukung yang pertama, dan menggunakan dimensi intrinsik untuk yang kedua

opera menggunakan dimensi intrinsik untuk kedua kasus

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

Demikian pula, browser menunjukkan hasil yang sangat berbeda pada hal-hal seperti http://jsfiddle.net/Nwupm/1/ , di mana lebih dari satu elemen dihasilkan. Perlu diingat bahwa CSS3 masih dalam tahap pengembangan awal, dan masalah ini belum diselesaikan.

Anda harus menggunakan latar belakang alih-alih gambar.

.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; tidak memiliki efek apa pun

positionin juga bekerja sangat aneh sesuai dengan fondasi frontend, jadi berhati-hatilah

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

Berikut ini adalah solusi lain (yang berfungsi): sesuaikan ukuran gambar Anda dengan ukuran yang Anda inginkan :)

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

Anda perlu pdf.png menjadi 20px * 10px agar ini berfungsi. 20px / 10px dalam css ada di sini untuk memberikan ukuran blok sehingga elemen-elemen yang datang setelah blok tidak semuanya kacau dengan gambar

Jangan lupa menyimpan salinan gambar mentah dalam ukuran aslinya

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

Anda bisa menggunakan zoomproperti. Periksa jsfiddle ini

Anda dapat mengubah tinggi atau lebar elemen Sebelum atau Setelah seperti ini:

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

Saya menggunakan lebar kendali ukuran font ini

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

Saat ini dengan flexbox Anda dapat sangat menyederhanakan kode Anda dan hanya menyesuaikan 1 parameter sesuai kebutuhan:

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

Sekarang Anda hanya dapat menyesuaikan lebar elemen dan ketinggian akan secara otomatis menyesuaikan, menambah / mengurangi lebar hingga ketinggian elemen berada pada angka yang Anda butuhkan.

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