在每个列表项后插入图像

Question

在每个列表元素之后插入小图像的最佳方法是什么？我用伪类尝试了它,但有些事情是不对的......

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

谢谢你的帮助!

Answer 1

更简单的方法就是:

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

Answer 2

试试这个:

ul li a:after {
    display: block;
    content: "";
    width: 3px;
    height: 5px;
    background: transparent url('../images/small_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

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

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