怎么用css给元素底部边框前加一个小圆点

可以使用CSS伪元素`::before`来实现给元素底部边框前加一个小圆点的效果，具体的实现步骤如下：

1. 给元素设置`position: relative`，以便在其内部使用`position: absolute`的伪元素进行定位。

2. 给元素设置底部边框`border-bottom`的样式。

3. 使用`::before`伪元素来生成一个小圆点，并设置其样式和位置。

下面是一个示例代码：

/* 给元素设置底部边框 */
.box {
  position: relative;
  border-bottom: 1px solid #ccc;
}

/* 使用::before伪元素生成一个小圆点 */
.box::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
}

其中，`left`和`bottom`属性用来控制小圆点的位置，`width`和`height`属性用来设置小圆点的大小，`border-radius`属性用来设置小圆点的形状为圆形，`background-color`属性用来设置小圆点的颜色。可以根据实际需要进行调整。