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

【问题标题】：Insert image after each list item在每个列表项之后插入图像
【发布时间】：2009-06-03 18:36:21
【问题描述】：

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

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

感谢您的帮助！

【问题讨论】：

标签： css

【解决方案1】：

更简单的方法是：

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

【讨论】：

还有一些在 Firefox 中的问题
请注意 IE7 很烂。
@RichardGarside “doctype”是指顶部的类似内容吗？ <!DOCTYPE html>
此方法的问题是您无法为图像提供替代文本，这（取决于图像的用途）可能会降低可访问性。
但是你不能使用这个来给图像指定高度/宽度。

【解决方案2】：

试试这个：

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

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

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

【讨论】：

我喜欢这种技术而不是简单的技术，因为它可以让您使用 background-image-size 控制图像的大小。
如果你想水平居中图像，你也需要这个。您不能将其定位到left: 50%，因为它不会与中间对齐。使用left: 0; width: 100% 并将背景位置设置为 50%。对我来说效果很好。感谢您提供有关所需 content 属性的提示。
这是更好的答案，而且，如果您使用引导程序，您可能需要使用 display: inline-block;否则图像将在每个 li 项目下，而不是在右侧或左侧
看起来不错，但是要内联显示图像（在“li”之后），应该是“display: inline-block”。
还有background-size: container

【解决方案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%;
}

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我的解决方案：

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

【讨论】：