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

143

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

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

谢谢你的帮助！

css

— 扎克
source

326

更简单的方法是：

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

— 集美
source

在firefox中也有一些问题

— Johnny_D 2013年

204

请注意，IE7很烂。

— 2013年

@RichardGarside通过“ doctype”，您顶部的意思是这样的吗？<!DOCTYPE html>

— 乔·莫拉诺

此方法的问题在于，您无法为图像提供替代文本，（这取决于图像的用途）可能会减少辅助功能。

— 达米安

2

但是您不能使用此方式为图像提供高度/宽度。

— Faisal Ashfaq 2015年

82

试试这个：

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

您需要content: "";声明以赋予生成的元素内容，即使该内容为“无”。

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

— 泰森
source

13

我喜欢这种技术而不是简单的技术，因为它使您可以使用background-image-size控制图像的大小。

— Andrew Hedges

2

如果要水平居中放置图像，也将需要此功能。您无法将其定位到，left: 50%因为它不会与中间对齐。使用left: 0; width: 100%背景位置并将其设置为50％。对我来说效果很好。感谢您提供有关必填content属性的提示。

— ygoe

1

这是更好的答案，而且，如果您使用的是引导程序，则可能需要使用display：inline-block; 否则，图像将位于每个li项目下，而不是在右侧或左侧

— Marvel Moe

1

看起来不错，但要以行内显示图像（在“ li”之后），应该为“ display：inline-block”。

— 死侍

还有background-size: container

— 罗杰

11

对于IE8支持，“内容”属性不能为空。

为了解决这个问题，我做了以下工作：

.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%;
}

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

— 乔诺克雷格
source

4

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

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

— 加布里埃尔·赫利（Gabriel Hurley）
source

1

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

— Chếabiết
source

0

我的解决方案是：

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

— 马特
source