CSS背景图像在元素的右侧

Question

我正在创建一个水平菜单并平滑菜单左侧和右侧的角落我有几张我使用过的图像。菜单本身具有背景颜色。 在最后一个元素上，我想将right-image.png放在元素本身之后。如果我将图像添加为新元素，它可以完美地工作，但由于这只是一个样式问题，我希望保留标记，并且只使用css进行样式设置。 它可能很容易，但我不能让它工作。 这是最后一个元素的外观：

所以基本上我想在不使用标记的情况下在所有元素之后添加图像。这可能吗？

Answer 1

element:after {
    position: absolute;
    right: 0;
    width: 50px; height: 50px; /* width and height set as dimensions of image */
    content: url(../images/bg.jpg);
}

Answer 2

可以使用：last-child选择器 http://www.quirksmode.org/css/firstchild.html

假设您的菜单中有未分类的列表 你的列表项目在“display：inline-block;”

HTML将

<ul id="myMenu">
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 2</a></li>
</ul>

CSS将是

#myMenu {display:block;}
#myMenu li {display:inline-block;}
#mymenu li:last-child {background: transparent url('<your img url here>') scroll 0 0;}

测试一下背景的位置，因为我不知道图像与最后一个元素的比较大小。现在它在“0 0”