각 목록 항목 뒤에 이미지 삽입

각 목록 요소 뒤에 작은 이미지를 삽입하는 가장 좋은 방법은 무엇입니까? 나는 의사 클래스로 시도했지만 뭔가 잘못되었습니다 ...

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 지원의 경우 "content"특성은 비워 둘 수 없습니다.

이 문제를 해결하려면 다음을 수행하십시오.

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

참고 : 이것은 이미지 스프라이트에서도 작동합니다

귀하의 문제는 : after psuedo-element에 content : 속성이 필요하다는 것입니다. 무언가를 삽입하도록 지시해야합니다. 이미지를 직접 삽입하도록 할 수도 있습니다.

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