css下li前有小图标

在Web页面中，常常需要在一系列选项或列表上添加小图标，以增强用户的可视体验。通过CSS，我们可以在<li>标签前添加小图标，下面就来详细介绍一下如何实现。

/* CSS代码 */
li {
  list-style: none; /* 去掉默认的样式 */
  padding: 0 0 0 20px; /* 给每个li添加左侧的空白 */
  line-height: 1.5; /* 设定行高，使图标和文本垂直对齐 */
  position: relative; /* 使每个li的position属性为相对定位 */
}
li:before { /* 在每个li前添加小图标 */
  content: "";
  position: absolute; /* 使小图标绝对定位 */
  left: 0; /* 将图标与文本对齐 */
  top: 0;
  width: 10px; /* 图标的尺寸 */
  height: 10px;
  background-image: url("icon.png"); /* 图标的路径 */
  background-size: 100% 100%; /* 使图标占满整个空间 */
} 

如上述CSS代码所示，首先利用list-style属性将默认的无序列表样式去掉，接着给每个<li>标签添加padding值以便留出图标的空间。在每个li标签前添加::before伪元素，并将其position属性设定为绝对定位，使得整个元素（包括图标和文本）位置相对于其父级元素而言。

图标的内容则可通过CSS中的content属性来实现，其中：content: ""表示图标不具有任何实际的内容。同时，利用background-image属性将图标的路径指定为我们想要的icon.png文件，并对其进行样式调整，如调整图标尺寸和位置、填充样式、或利用background-size属性将图标占满整个空间。

如此一来，每个列表项前便会自动添加相应的图标，并与文本内容完美地对齐。