반응형
각 목록 항목 뒤에 이미지 삽입
각 목록 요소 뒤에 작은 이미지를 삽입하는 가장 좋은 방법은 무엇입니까? 나는 의사 클래스로 시도했지만 뭔가 잘못되었습니다 ...
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;
}
참고 URL : https://stackoverflow.com/questions/946403/insert-image-after-each-list-item
반응형
'development' 카테고리의 다른 글
sc.exe로 서비스를 만들 때 컨텍스트 매개 변수를 전달하는 방법은 무엇입니까? (0) | 2020.06.24 |
---|---|
elasticsearch bool 쿼리는 OR과 결합해야합니다 (0) | 2020.06.24 |
오류 : (26, 0) Gradle DSL 방법을 찾을 수 없음 : 'runProguard ()' (0) | 2020.06.24 |
특정 조건을 기다릴 때 WebDriver로 웹 페이지 새로 고침 (0) | 2020.06.24 |
URL에서 프로토콜 + 호스트 이름 가져 오기 (0) | 2020.06.24 |