Sisipkan gambar setelah setiap item daftar

144

Apa cara terbaik untuk menyisipkan gambar kecil setelah setiap elemen daftar? Saya mencobanya dengan kelas semu tetapi ada sesuatu yang tidak beres ...

ul li a:after {display: block;
width: 3px;
height: 5px;
background: url ('../images/small_triangle.png') transparent no-repeat;}

Terima kasih atas bantuannya!

css

— Zac
sumber

327

Cara termudah untuk melakukannya adalah:

ul li:after {
    content: url('../images/small_triangle.png');
}

— jimyi
sumber

Dan juga beberapa masalah dengan ini di firefox

— Johnny_D

204

Sadarilah bahwa IE7 menyebalkan.

— Big McLargeHuge

@ RichardGarside Dengan "doctype", apakah Anda hanya bermaksud seperti ini di bagian atas? <!DOCTYPE html>

— Joe Morano

Masalah dengan metode ini adalah Anda tidak dapat memberikan teks alternatif untuk gambar, yang (tergantung pada apa gambar digunakan) dapat mengurangi aksesibilitas.

— Damien

2

Tetapi Anda tidak dapat memberikan tinggi / lebar gambar menggunakan ini.

— Faisal Ashfaq

82

Coba ini:

ul li a:after {
    display: block;
    content: "";
    width: 3px;
    height: 5px;
    background: transparent url('../images/small_triangle.png') no-repeat;
}

Anda memerlukan content: "";deklarasi untuk memberikan konten elemen yang dihasilkan, bahkan jika konten itu "tidak ada".

Juga, saya memperbaiki sintaks / pemesanan backgrounddeklarasi Anda .

— Tyson
sumber

13

Saya suka teknik ini daripada yang lebih sederhana karena memberi Anda kontrol atas ukuran gambar menggunakan background-image-size.

— Andrew Hedges

2

Anda juga membutuhkan ini jika ingin memusatkan gambar secara horizontal. Anda tidak dapat memposisikannya left: 50%karena tidak akan sejajar dengan tengah. Gunakan left: 0; width: 100%dan atur posisi latar belakang menjadi 50% sebagai gantinya. Bekerja dengan baik untuk saya. Terima kasih atas tip tentang contentatribut yang diperlukan .

— ygoe

1

Ini adalah jawaban yang lebih baik dan juga, jika Anda menggunakan bootstrap, Anda mungkin perlu menggunakan tampilan: inline-block; jika tidak, gambar akan berada di bawah setiap item li dan bukan di kanan atau kiri

— Marvel Moe

1

Tampak hebat tetapi untuk menampilkan gambar inline (setelah "li"), itu harus "display: inline-block".

— Deadpool

dan jugabackground-size: container

— roger

11

Untuk dukungan IE8, properti "konten" tidak boleh kosong.

Untuk menyiasatinya, saya telah melakukan yang berikut:

.ul li:after {
    content:"icon";
    text-indent:-999em;
    display:block;
    width:32px;
    height:32px;
    background:url(../img/icons/spritesheet.png) 0 -620px no-repeat;
    margin:5% 0 0 45%;
}

Catatan: Ini juga berfungsi dengan sprite gambar

— jonnocraig
sumber

4

Saya pikir masalah Anda adalah bahwa: setelah elemen psuedo memerlukan konten: properti yang diatur di dalamnya. Anda harus mengatakannya untuk memasukkan sesuatu. Anda bahkan bisa memasukkannya langsung ke gambar:

ul li:after {
    content: url('../images/small_triangle.png');
}

— Gabriel Hurley
sumber

1

ul li + li:before
{
    content:url(imgs/separator.gif);
}

— Chưa biết
sumber

0

Solusi saya untuk melakukan ini:

li span.show::after{
  content: url("/sites/default/files/new5.gif");
  padding-left: 5px;
}

— Mat
sumber