在每个列表项后插入图像

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

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

谢谢你的帮助!

更简单的方法是:

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

尝试这个:

 ul li a:after { display: block; content: ""; width: 3px; height: 5px; background: transparent url('..http://img.dovov.comsmall_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%; } 

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

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

 ul li:after { content: url('..http://img.dovov.comsmall_triangle.png'); } 
 ul li + li:before { content:url(imgs/separator.gif); } 

我的解决scheme是这样做的:

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