CSS 在每个列表项后插入图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/946403/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Insert image after each list item
提问by Zac
What would be the best way to insert a small image after each list element? I tried it with a pseudo class but something is not right...
在每个列表元素后插入小图像的最佳方法是什么？我用伪类尝试过，但有些不对劲......
ul li a:after {display: block;
width: 3px;
height: 5px;
background: url ('../images/small_triangle.png') transparent no-repeat;}
Thanks for any help!
谢谢你的帮助！
回答by jimyi
The easier way to do it is just:
更简单的方法是：
ul li:after {
content: url('../images/small_triangle.png');
}
回答by Tyson
Try this:
尝试这个：
ul li a:after {
display: block;
content: "";
width: 3px;
height: 5px;
background: transparent url('../images/small_triangle.png') no-repeat;
}
You need the content: "";declaration to give your generated element content, even if that content is "nothing".
您需要content: "";声明来提供生成的元素内容，即使该内容“没有”。
Also, I fixed the syntax/ordering of your backgrounddeclaration.
此外，我修复了您background声明的语法/顺序。
回答by jonnocraig
For IE8 support, the "content" property cannot be empty.
对于 IE8 支持，“内容”属性不能为空。
To get around this I've done the following :
为了解决这个问题，我做了以下工作：
.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%;
}
Note : This works with image sprites too
注意：这也适用于图像精灵
回答by Gabriel Hurley
I think your problem is that the :after psuedo-element requires the content: property set inside it. You need to tell it to insert something. You could even just have it insert the image directly:
我认为您的问题是 :after psuedo-element 需要在其中设置 content: 属性。你需要告诉它插入一些东西。你甚至可以让它直接插入图像：
ul li:after {
content: url('../images/small_triangle.png');
}
回答by Ch?a bi?t
ul li + li:before
{
content:url(imgs/separator.gif);
}
回答by Matt
My solution to do this:
我这样做的解决方案：
li span.show::after{
content: url("/sites/default/files/new5.gif");
padding-left: 5px;
}
