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

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

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

Answer 5

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

Answer 6

我的解决方案：

function Solution(){
    var queue = new Array();
}

var sol1 = new Solution();
console.log(sol1.queue);

在每个列表项后插入图像

6 个答案: