使用CSS3僞類實現時間軸

有關於時間軸的實現方式，下面是使用了css3僞類的方式：

類似於這種時間軸圓點是使用before的僞類去實現而軸使用after的僞類去實現圓的效果可以使用border-radius去實現，下面是具體實現的方式。

.logAdrWrap::before{
  content: '';                //必要字段
  width:10rpx;                //必要字段
  height:10rpx;               //必要字段
  border-radius: 10rpx;    
  position: absolute;         //必要字段
  top: 0;                     //必要字段
  left: 0;                    //必要字段
  background-color:#cdcdcd ;  //必要字段
}
.logAdrWrap::after{
  content: '';
  width:2rpx;
  height:calc(100% - 10rpx);
  position: absolute;
  top:12rpx;
  left: 4rpx;
  background-color:#cdcdcd ;
}

Tips:

1.如果發現before出現的位置是在頁面左上角，則要在引用的元素上面比如這邊是logAdrWrap設置position:relative即可。

2.小程序端是不支持僞類的調試需要在遊覽器端調試！