Chèn hình ảnh sau mỗi mục danh sách

143

Điều gì sẽ là cách tốt nhất để chèn một hình ảnh nhỏ sau mỗi thành phần danh sách? Tôi đã thử nó với một lớp giả nhưng có gì đó không đúng ...

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

Cảm ơn vì bất kì sự giúp đỡ!

css

— Zac
nguồn

326

Cách dễ dàng hơn để làm điều đó chỉ là:

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

— jimyi
nguồn

Và cũng có một số vấn đề với điều này trong firefox

— Johnny_D

204

Hãy lưu ý rằng IE7 hút.

— Big McLUNDHuge

@RichardGarside Bởi "doctype", bạn chỉ muốn nói điều gì đó như thế này ở đầu? <!DOCTYPE html>

— Joe Morano

Vấn đề với phương pháp này là bạn không thể cung cấp văn bản thay thế cho hình ảnh, điều này (tùy thuộc vào hình ảnh được sử dụng để làm gì) có thể làm giảm khả năng truy cập.

— Damien

2

Nhưng bạn không thể cung cấp chiều cao / chiều rộng cho hình ảnh bằng cách sử dụng này.

— Faisal Ashfaq

82

Thử cái này:

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

Bạn cần content: "";khai báo để cung cấp nội dung phần tử được tạo của bạn, ngay cả khi nội dung đó là "không có gì".

Ngoài ra, tôi đã sửa lỗi cú pháp / thứ tự backgroundkhai báo của bạn .

— Tyson
nguồn

13

Tôi thích kỹ thuật này hơn những cái đơn giản hơn vì nó cho phép bạn kiểm soát kích thước của hình ảnh bằng cách sử dụng kích thước hình nền.

— Andrew Hedges

2

Bạn cũng cần điều này nếu bạn muốn căn giữa hình ảnh theo chiều ngang. Bạn không thể định vị nó left: 50%bởi vì nó sẽ không được căn giữa. Sử dụng left: 0; width: 100%và đặt vị trí nền là 50% thay thế. Hoạt động tốt cho tôi. Cảm ơn các mẹo về contentthuộc tính cần thiết .

— ygoe

1

Đây là câu trả lời tốt hơn và cũng vậy, nếu bạn đang sử dụng bootstrap, bạn có thể cần sử dụng display: inline-block; nếu không, hình ảnh sẽ nằm dưới mỗi mục li và không ở bên phải hoặc bên trái

— Marvel Moe

1

Trông thật tuyệt nhưng để hiển thị hình ảnh nội tuyến (sau "li"), nó phải là "display: inline-block".

— Deadpool

và cũngbackground-size: container

— roger

11

Đối với hỗ trợ IE8, thuộc tính "nội dung" không thể để trống.

Để giải quyết vấn đề này tôi đã thực hiện như sau:

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

Lưu ý: Điều này cũng hoạt động với các họa tiết hình ảnh

— kết nối
nguồn

4

Tôi nghĩ vấn đề của bạn là: phần tử psuedo yêu cầu nội dung: thuộc tính được đặt bên trong nó. Bạn cần nói với nó để chèn một cái gì đó. Bạn thậm chí có thể chỉ cần nó chèn hình ảnh trực tiếp:

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

— Gabriel Hurley
nguồn

1

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

— Kiến
nguồn

0

Giải pháp của tôi để làm điều này:

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

— Matt
nguồn