Question

这个问题几乎解释了它，但我有列表项目我想在它们之前放一个简单的钻石图标但是当我尝试使用::之后它最终把图像放在上面而不是同一条线上我可以＆＃39 ;我似乎真的想知道如何把它放在同一行的列表图标之前。

就像我说的那个图像只是一颗小钻石，它的5px乘5px

＆＃13;

.list-menu::before {
	content: url('../images/menu-icons/image-before.png');
}

＆＃13;

<div class="sb-slidebar sb-left sb-style-push">
	<nav>
		<ul>
			<li class="list-menu"><a href="#">Home</a></li>
		</ul>
	</nav>
</div>

＆＃13;

Answer 1

这里根本不需要使用::before伪元素。你可以使用背景图片：

.list-menu {
  background-image: url('http://placehold.it/16x16');
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 20px; /* Adjust according to image size to push text across. */
}

<div class="sb-slidebar sb-left sb-style-push">
	<nav>
		<ul>
			<li class="list-menu"><a href="#">Home</a></li>
		</ul>
	</nav>
</div>

Answer 2

嗯，list-style-image是为此做的。

自IE 4.0起支持。我想这应该足够了。

＆＃13;

ul {
  list-style-image: url('http://placehold.it/12x12');
}

＆＃13;

<ul>
  <li>Text content
  <li>Text content
  <li>Text content
</ul>

＆＃13;

使用css :: before在列表链接之前添加一个小图标

2 个答案: