css时间轴

1,104 阅读1分钟

写个人博客项目时要用到时间轴 主要就是用伪元素 ::before 和::after 来实现 before 做个球 after 做个线 内容用 margin 向右偏移

```  &::before {
      content: "";
      width: 20px;
      height: 20px;
      border-radius: 100%;
      border: 3px solid white;
      background-color: #9e5add;
      position: absolute;
      left: -15px;
      top: 65px;
      z-index: 100;
    }
    &::after {
      content: "";
      width: 3px;
      height: calc(100% + 15px);
      background-color: #9e5add;
      position: absolute;
      top: 15;
      left: -7px;
    }