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

Posted 2023-03-05

【中文标题】使用 CSS ::before 在列表链接之前添加一个小图标

【英文标题】：Using CSS ::before to add a small icon before list links

【发布时间】：2014-12-14 00:04:06

【问题描述】：

这个问题很好地解释了它，但我有列表项，我想在它们之前放置一个简单的菱形图标，但是当我尝试使用 ::before 时，它​​最终将图像放在上面而不是同一行，我不能似乎真的知道如何将它放在同一行的列表图标之前。

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

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

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

【问题讨论】：

改变<li>图标本身怎么样..

【参考方案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>

【讨论】：

谢谢！你能解释一下我什么时候应该使用 :before 和 :after 吗？

@Bob :before 和 :after 是 CSS 引入 Generated Content 时创建的两个伪元素。本规范记录了此类内容的确切用途，但简而言之，这些内容用于不向 DOM 树公开某些信息，同时仍使内容在页面上可见。

但是如果你想在不同的元素上这样做呢？说，一个

@TheRealChx101 您可以使用相同的方法。

@JamesDonnelly 谢谢。我已经想通了。我没看过那么好。

【参考方案2】：

好吧，list-style-image 就是为此而生的。

自 IE 4.0 起受支持。我猜应该够了。

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

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