在每个列表项后插入图像

在每个列表元素之后插入一个小图片的最佳方法是什么？ 我尝试了一个伪类，但有些东西是不正确的…

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

谢谢你的帮助！

Answer 1

更简单的方法是：

 ul li:after { content: url('..http://img.dovov.comsmall_triangle.png'); } 

Answer 2

尝试这个：

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

你需要的content: ""; 声明给你生成的元素内容，即使这个内容是“没有”。

另外，我还修复了你的background声明的语法/顺序。

Answer 3

对于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%; } 

注意：这也适用于图片精灵

Answer 4

我认为你的问题是：在psuedo-element之后，需要在其中设置content：属性。 你需要告诉它插入的东西。 你甚至可以直接插入图像：

 ul li:after { content: url('..http://img.dovov.comsmall_triangle.png'); } 

Answer 5

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

Answer 6

我的解决scheme是这样做的：

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