在每个列表项后面插入图像

在每个列表元素后面插入一个小图像的最佳方法是什么？我用一个伪类尝试了一下，但是有些地方不对劲..。

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

谢谢你的帮助！

319000 次浏览

小开

试试这个:

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

您需要 content: "";声明来提供生成的元素内容，即使该内容是“无”。

此外，我还修改了 background声明的语法/顺序。

小开

最佳答案

最简单的方法就是:

ul li:after {
content: url('../images/small_triangle.png');
}

小开

我认为您的问题在于: after suedo-element 需要在其中设置 content: property。你需要让它插入一些东西。你甚至可以让它直接插入图片:

ul li:after {
content: url('../images/small_triangle.png');
}

小开

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

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

小开

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

小开

我的解决办法是:

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