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

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

각 목록 요소 뒤에 작은 이미지를 삽입하는 가장 좋은 방법은 무엇입니까?가짜 수업으로 해봤는데 뭔가 이상해요...

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:property set이 필요하다는 것입니다.당신은 무언가를 삽입하기 위해 그것을 말할 필요가 있습니다.이미지를 직접 삽입할 수도 있습니다.

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

언급URL : https://stackoverflow.com/questions/946403/insert-image-after-each-list-item