[分享]Css做竖着的线上有小圆点

CSS做竖着的线上有小圆点，非常常见，通常用于网站侧边栏等需要突出显示的地方。

 /* 创建竖线 */
  .line {
    border-left: 2px solid #000;
    height: 100px;
    position: relative;
  }

  /* 创建小圆点 */
  .line::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #000;
    border-radius: 50%;
    top: 0px;
    left: -6px;
  }

  /* 相邻线之间的间距 */
  .line + .line {
    margin-top: 20px;
  } 

我们使用CSS的伪元素`::before`来实现小圆点的效果。我们把它设置为绝对定位，然后通过给`top`和`left`添加负数值将其放置在线的左端，定位到圆点的中心。当然，我们也可以修改这些值来通过微调位置来制定圆点的大小和位置。在样式表的最后，我们添加一个`+`选择器，它将用于在线的相邻元素之间添加间距。