css列表前的小方块

对于CSS中列表前的小方块，我们可以使用伪元素的方法添加。具体步骤如下：

1. 确认列表样式

在添加小方块前，我们需要确认列表样式，比如列表的样式可能是有序或无序，不同的样式需要使用不同的样式属性。

无序列表样式

无序列表使用ul标签，可以使用list-style-type属性设置小方块的样式类型。常用的样式类型包括：

• disc：实心圆点（默认值）；
• circle：空心圆点；
• square：实心方块。

ul {
  list-style-type: disc;  /* 实心圆点 */
}

有序列表样式

有序列表使用ol标签，可以使用list-style-type属性设置小方块的样式类型。常用的样式类型包括：

• decimal：阿拉伯数字（默认值）；
• upper-alpha：大写字母；
• lower-alpha：小写字母；
• upper-roman：大写罗马数字；
• lower-roman：小写罗马数字。

ol {
  list-style-type: decimal;  /* 阿拉伯数字 */
}

2. 添加小方块

在确认了列表样式后，我们就可以添加小方块了。

使用伪元素添加

我们可以使用::before伪元素添加小方块。需要注意的是，由于伪元素默认是一个行内元素，因此需要将它设置成块级元素，才能为其设置宽高。

ul li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: black;
  margin-right: 5px;
}

使用background-image添加

我们也可以将小方块作为背景图片添加到列表项的左侧。需要注意的是，需要将列表项的内边距设置成能容纳背景图片的大小。

ul li {
  padding-left: 15px;  /* 容纳背景图片的大小 */
  background-image: url("square.png");
  background-position: left center;
  background-repeat: no-repeat;
}

示例说明

示例1: 使用伪元素添加

在以下HTML代码中，我们要为每个无序列表项添加小方块。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

我们可以将以下CSS代码添加至样式表中：

ul li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: black;
  margin-right: 5px;
}

实现以下效果：

• Item 1
• Item 2
• Item 3

示例2: 使用background-image添加

在以下HTML代码中，我们要为每个有序列表项添加小方块背景图片。

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>  
</ol>

我们可以将以下CSS代码添加至样式表中：

ol li {
  padding-left: 15px;
  background-image: url("square.png");
  background-position: left center;
  background-repeat: no-repeat;
}

实现以下效果：

1. Item 1
2. Item 2
3. Item 3

以上就是添加CSS列表前的小方块的完整攻略，希望对你有所帮助！