แทรกภาพหลังแต่ละรายการ

อะไรจะเป็นวิธีที่ดีที่สุดในการแทรกภาพเล็ก ๆ หลังจากแต่ละองค์ประกอบของรายการ ฉันลองใช้คลาสหลอก แต่มีบางอย่างไม่ถูกต้อง ...

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

ขอบคุณสำหรับความช่วยเหลือใด ๆ !

วิธีที่ง่ายกว่าที่จะทำคือ:

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

ลองสิ่งนี้:

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

คุณต้องcontent: "";ประกาศเพื่อให้เนื้อหาองค์ประกอบที่สร้างขึ้นแม้ว่าเนื้อหานั้นจะเป็น "ไม่มีอะไร"

นอกจากนี้ฉันได้แก้ไขไวยากรณ์ / การเรียงลำดับการbackgroundประกาศของคุณ

สำหรับการรองรับ IE8 คุณสมบัติ "เนื้อหา" ต้องไม่ว่างเปล่า

เพื่อหลีกเลี่ยงสิ่งนี้ฉันได้ทำสิ่งต่อไปนี้:

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

หมายเหตุ: สิ่งนี้ใช้ได้กับภาพสไปรต์ด้วย

ฉันคิดว่าปัญหาของคุณคือ: หลังจากองค์ประกอบ psuedo ต้องการเนื้อหา: คุณสมบัติตั้งอยู่ข้างใน คุณต้องบอกให้ใส่อะไรลงไป คุณสามารถแทรกภาพได้โดยตรง:

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

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

วิธีแก้ปัญหาของฉันคือ:

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