在每个列表项后插入图片。

Question

如何在每个列表元素后插入一个小图像？我尝试使用伪类，但是有些不对劲...

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

感谢任何帮助！

- Zac

Answer 1

更简单的方法就是：

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

- jimyi

---

还有在火狐浏览器中的一些问题。 - Johnny_D

请注意IE7很烂。 - Big McLargeHuge

这种方法的问题在于您无法为图像提供替代文本，这可能会降低可访问性（具体取决于图像的用途）。 - Damien

但是您不能使用这种方法为图像指定高度/宽度。 - Faisal Ashfaq

你能改变这个插入的图片（<img>）的尺寸吗？还是在这种情况下需要将其作为背景插入？ - Simon Ferndriger

Answer 2

试试这个：

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

你需要添加 content: ""; 声明来给你生成的元素添加内容，即使这个内容是 "nothing"。

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

- Tyson

---

我喜欢这种比较简单的技术，因为它可以通过background-image-size来控制图像的大小。 - Andrew Hedges

如果您想要水平居中一张图片，您也需要这个。您不能将其定位为 left: 50%，因为它不会对齐到中间。使用 left: 0; width: 100% 并将背景位置设置为 50%。这对我很有效。感谢您提供所需的 content 属性的提示。 - ygoe

这是更好的答案，如果你正在使用Bootstrap，你可能需要使用display: inline-block;否则图像将位于每个li项下面而不是右侧或左侧。 - Marvel Moe

看起来很不错，但要将图像内联显示（在“li”之后），应该是“display: inline-block”。 - Deadpool

以及 background-size: container - roger

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

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

- jonnocraig

Answer 4

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

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

- Gabriel Hurley

Answer 5

我的解决方案如下：

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

- Matt

Answer 6

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

- Chưa biết